Making RB interactive and new HTML features

[meerkat]

Some are not aware of HTML5 features.
Many things we did with code can now be done with a simple "<input type=" statement. Things like checking for numeric or decimal, color picker, date picker, time pickers are now available.

Making RB interactive has also been a problem.
For example after entering a customer number you'd like to know if it's ok by looking it up in a database after they enter the number, and not wait until the end after they submit the entire form. This makes HTML as simple as the interactive "input" something, then checking it. To get RB interactive I always use the hidden button trick. You can make input stuff in the form click a button.

Here is a quick test I did to show some if that.
It hides and shows sections on the screen.
It immediately checks things after you enter it.
It does numeric checks, and date, time, and color pickers.


CSSClass ".hide", "{visibility: hidden; height:0px; bprder:none}"
bf$ = "<SPAN STYLE='font-family:Arial; font-weight:700; font-size:12pt'>"
dim shoStuff1$(7)
dim shoStuff2$(7)
numShoStuff = 7
shoStuff1$(1)=""   : shoStuff2$(1) = "--Hide Show--"
shoStuff1$(2)="R"  : shoStuff2$(2) = "Show Radio"
shoStuff1$(3)="RH" : shoStuff2$(3) = "Hide Radio"
shoStuff1$(4)="C"  : shoStuff2$(4) = "Show Check Box"
shoStuff1$(5)="CH" : shoStuff2$(5) = "Hide Check Box"
shoStuff1$(6)="D"  : shoStuff2$(6) = "Show Drop Down"
shoStuff1$(7)="DH" : shoStuff2$(7) = "Hide Drop Down"
shoStuff$ = ""

html bf$;"<TABLE BORDER='1' CELLPADDING='0' CELLSPACING='0' BGCOLOR='#A6C36A'>"
html "<TR ALIGN='CENTER' BGCOLOR='#C4D79B'>"
html "<TD COLSPAN='2' ALIGN='CENTER'>Interactive test"
html "</TD></TR><TR>"

' -------------------------------
' Show or hide form information
' -------------------------------
html "<TD bgcolor='#C4D79B' align=right>Show Stuff</TD><TD>"
html "<SELECT name='shoStuff' onChange=document.getElementById('shoStuffClick').click(); />"
for i = 1 to numShoStuff
if shoStuff$ = shoStuff1$(i) then sel$ = "selected" else sel$ = ""
html  "<option value='";shoStuff1$(i);"' ";sel$;">";shoStuff2$(i);"</option>"
next i
html "</select>"
html "</TR><TR>"
button #shoStuffClick,"",[shoStuffGo]
#shoStuffClick setid("shoStuffClick")
#shoStuffClick cssclass("hide")

' -------------------------------
' Radio
' -------------------------------
html "<TD ALIGN='RIGHT' BGCOLOR='#C4D79B'>Radio Buttons</TD>"
html "<TD id='rdoSho'>"
gosub [rdo]
html a$
html "</TR><TR>"
button #rdoClick,"",[rdoGo]
#rdoClick setid("rdoClick")
#rdoClick cssclass("hide")

' -------------------------------
' Check Box
' -------------------------------
html "<TD ALIGN='RIGHT' BGCOLOR='#C4D79B'>Check Boxes</TD>"
html "<TD id='ckbSho'>"
gosub [ckb]
html a$
html "</TR><TR>"
button #ckbClick,"",[ckbGo]
#ckbClick setid("ckbClick")
#ckbClick cssclass("hide")

' -------------------------------
' Drop down
' -------------------------------
html "<TD ALIGN='RIGHT' BGCOLOR='#C4D79B'>Drop Down</TD>"
html "<TD id='drpSho'>"
gosub [drp]
html a$
html "</TD></TR><TR>"
button #drpClick,"",[drpGo]
#drpClick setid("drpClick")
#drpClick cssclass("hide")

html "<TD ALIGN='RIGHT' BGCOLOR='#C4D79B'>Date Field with Picker</TD>"
html "<TD><input type='date' name='begDate' id='begDate' value='2000-01-01' size=17/></TD></TR><TR>"

html "<TD ALIGN='RIGHT' BGCOLOR='#C4D79B'>Time Field with Picker</TD>"
html "<TD><input type='time' name='begTime' id='begTime' value='08:00' size=5/></TD></TR><TR>"

html "<TD ALIGN='RIGHT' BGCOLOR='#C4D79B'>Numeric Field with check</TD>"
html "<TD><input type='number' name='num' id='num' value='123' size=5/></TD></TR><TR>"

html "<TD ALIGN='RIGHT' BGCOLOR='#C4D79B'>Decimal Field with check</TD>"
html "<TD><input type='number' name='num' id='num' value='123' size=5/></TD></TR><TR>"

html "<TD ALIGN='RIGHT' BGCOLOR='#C4D79B'>Color Picker</TD>"
html "<TD><input type='color' name='colr' id='colr' value='red'/></TD>"
html "</TR></TABLE>"
wait

'====================================================================
[shoStuffGo]
shoStuff$ = #request get$("shoStuff")

print "Show Stuff entered:"+shoStuff$
if left$(shoStuff$,1) = "R" then ' Radio button
a$ = "Hide Radio"
if shoStuff$ = "R" then gosub [rdo]
shoWhere$ = "rdoSho"
gosub [shoIt]
wait
end if

if left$(shoStuff$,1) = "C" then ' Check box
a$ = "Hide Check Box"
if shoStuff$ = "C" then gosub [ckb]
shoWhere$ = "ckbSho"
gosub [shoIt]
wait
end if

if left$(shoStuff$,1) = "D" then ' Drop Down
a$ = "Hide Drop Down"
if shoStuff$ = "D" then gosub [drp]
shoWhere$ = "drpSho"
gosub [shoIt]
wait
end if

' -------------------------------
' Radio
' -------------------------------
[rdoGo]
rdo$ = #request get$("rdo")
print "Radio entered:";rdo$
gosub [rdo]
shoWhere$ = "rdoSho"
gosub [shoIt]
wait

[rdo]
a$ = ""
for i = 1 to 4
x$ = "r"+str$(i)
if rdo$ = x$ then chk$ = "checked" else chk$ = ""
a$ = a$ + "<input type='radio' name='rdo' id='rdo' value='r";str$(i);"' ";chk$
a$ = a$ + " onChange=document.getElementById('rdoClick').click(); >Raduio Number";str$(i);"<br>"
next i
return
' -------------------------------
' Check Box
' -------------------------------
[ckbGo]
c$ = ""
for i = 1 to 5
x$ = "ckb";str$(i)
c1$ = #request get$(x$)
if c1$ <> "" then
c$ = c$ + c1$ + ","
end if
next i
print "Check Boxes entered:";c$
gosub [ckb]
shoWhere$ = "ckbSho"
gosub [shoIt]
wait

[ckb]
a$ = ""
for i = 1 to 5
x$ = "c"+str$(i)
if instr(c$,x$) > 0 then chk$ = "checked" else chk$ = ""
a$ = a$ + "<INPUT TYPE='CHECKBOX' NAME='ckb";str$(i);"' VALUE='c";str$(i);"' ";chk$
a$ = a$ + " onChange= document.getElementById('ckbClick').click(); >Check Number:";str$(i);"<BR>"
next i
return

' -------------------------------
' Drop Down
' -------------------------------
[drpGo]
d$ = ""
drp$      = #request get$("drp")
print "Drop Down entered:";drp$
gosub [drp]
shoWhere$ = "drpSho"
gosub [shoIt]
wait

[drp]
a$ = "<SELECT name='drp' onChange=document.getElementById('drpClick').click(); >"
for i = 1 to 9
x$ = "d"+str$(i)
if x$ = drp$ then sel$ = "selected" else sel$ = ""
a$=a$+ "<option value='";x$;"' ";sel$;">Drop Down Number:";str$(i);"</option>"
next i
a$=a$+ "</SELECT>"
RETURN

' -----------------------------
' Where in HTML to show it
' -----------------------------
[shoIt]
html "<script> document.getElementById('";shoWhere$;"').innerHTML = """
html a$
html """;</script>"
return



[jerry]

Awesome.

Thank you for the sample code.