### jQuery Mobile Form Controls

The jQuery Mobile offers numerous controls.
To note is that the development is progressing in adding more controls. Look at the jQuery Mobile Roadmap:
http://
Example Form Controls and how to obtain their Values
HTML Code
<div class="content-primary">
<!-- TYPE = TEXTINPUT -->
<div data-role="fieldcontain">
<label for="name">1. Textinput1:</label>
<input type="text" name="textinput1" id="textinput1" value="" />
</div>
<!-- TYPE = TEXTAREA -->
<div data-role="fieldcontain">
<label for="textarea">2. Textarea1:</label>
<textarea cols="40" rows="8" name="textarea1" id="textarea1"></textarea>
</div>
<!-- TYPE = SEARCHINPUT -->
<div data-role="fieldcontain">
<label for="search">3. Searchinput1:</label>
<input type="search" name="password" id="searchinput1" value="" />
</div>
<!-- TYPE = SLIDERFLIPSWITCH -->
<div data-role="fieldcontain">
<label for="sliderflipswitch1">4. Sliderflipswitch1:</label>
<select name="sliderflipswitch1" id="sliderflipswitch1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<!-- TYPE = SLIDER -->
<div data-role="fieldcontain">
<label for="slider">5. Slider1:</label>
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-highlight="true" />
</div>
<!-- TYPE = CONTROLGROUPCHECKBOX VER -->
<div data-role="fieldcontain" data-type="vertical">
<fieldset data-role="controlgroup">
<legend>6. Controlgroupcheckbox VER:</legend>
<input type="checkbox" name="checkboxva" id="checkboxva" class="custom" />
<label for="checkboxva">ChoiceA</label>
<input type="checkbox" name="checkboxvb" id="checkboxvb" class="custom" />
<label for="checkboxvb">ChoiceB</label>
<input type="checkbox" name="checkboxvc" id="checkboxvc" class="custom" />
<label for="checkboxvc">ChoiceC</label>
</fieldset>
</div>
<!-- TYPE = CONTROLGROUPCHECKBOX HOR -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>7. Controlgroupcheckbox HOR:</legend>
<input type="checkbox" name="checkboxha" id="checkboxha" class="custom" />
<label for="checkboxha">b</label>
<input type="checkbox" name="checkboxhb" id="checkboxhb" class="custom" />
<label for="checkboxhb"><em>i</em></label>
<input type="checkbox" name="checkboxhc" id="checkboxhc" class="custom" />
<label for="checkboxhc">u</label>
</fieldset>
</div>
<!-- TYPE = CONTROLGROUPRADIO VER -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>8. Controlgroupradio VER:</legend>
<input type="radio" name="radiochoiceva" id="radiochoiceva" value="choiceVA" checked="checked" />
<label for="radiochoiceva">RadioVA</label>
<input type="radio" name="radiochoicevb" id="radiochoicevb" value="choiceVB" />
<label for="radiochoicevb">RadioVB</label>
<input type="radio" name="radiochoicevc" id="radiochoicevc" value="choiceVC" />
<label for="radiochoicevc">RadioVC</label>
</fieldset>
</div>
<!-- TYPE = CONTROLGROUPRADIO HOR -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>9. Controlgroupradio HOR: </legend>
<input type="radio" name="radiochoiceha" id="radiochoiceha" value="choiceHA" checked="checked" />
<label for="radiochoiceha">RadioHA</label>
<input type="radio" name="radiochoicehb" id="radiochoicehb" value="choiceHB" />
<label for="radiochoicehb">RadioHB</label>
<input type="radio" name="radiochoicehc" id="radiochoicehc" value="choiceHC" />
<label for="radiochoicehc">RadioHC</label>
</fieldset>
</div>
<!-- TYPE = SELECTCHOICE1 -->
<div data-role="fieldcontain">
<label for="selectchoice1" class="select">SelectChoice1:</label>
<select name="selectchoice1" id="selectchoice1">
<option value="selectchoice1A">selectchoice1A</option>
<option value="selectchoice1B">selectchoice1B</option>
<option value="selectchoice1C">selectchoice1C</option>
</select>
</div>
<!-- TYPE = SELECTCHOICE3 -->
<div data-role="fieldcontain">
<label for="selectchoice2" class="select">SelectChoice2:</label>
<select name="selectchoice2" id="selectchoice2">
<option value="selectchoice2A">selectchoice2A</option>
<option value="selectchoice2B">selectchoice2B</option>
<option value="selectchoice2C">selectchoice2C</option>
</select>
</div>
<!-- TYPE = SELECTCHOICEMENU1 -->
<div data-role="fieldcontain">
<label for="selectchoicea" class="select">Selectchoicemenu1:</label>
<select name="selectchoicemenu1" id="selectchoicemenu1" data-native-menu="false">
<option>Custom menu example</option>
<option value="selectchoicemenu1A">selectchoicemenu1A</option>
<option value="selectchoicemenu1B">selectchoicemenu1B</option>
<option value="selectchoicemenu1C">selectchoicemenu1C</option>
</select>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</div>
</div><!--/content-primary -->
B4J Code
Dim s As String
s = s & "Textinput1: " & textinput1.GetVal.Value & "
"
s = s & "Textarea1: " & textarea1.GetVal.Value & "
"
s = s & "Searchinput1: " & searchinput1.GetVal.Value & "
"
s = s & "Sliderflipswitch1: " & sliderflipswitch1.GetVal.Value & "
"
s = s & "Slider1: " & slider1.GetVal.Value & "
"
s = s & "Controlgroupcheckbox VER: " & checkboxva.GetProp("checked").Value& " + " & checkboxvb.GetProp("checked").Value& " + " & checkboxvc.GetProp("checked").Value& "
"
s = s & "Controlgroupcheckbox HOR: " & checkboxha.GetProp("checked").Value& " + " & checkboxhb.GetProp("checked").Value& " + " & checkboxhc.GetProp("checked").Value& "
"
s = s & "Radiochoice VER: " & radiochoiceva.GetProp("checked").Value& " + " & radiochoicevb.GetProp("checked").Value& " + " & radiochoicevc.GetProp("checked").Value& "
"
s = s & "Radiochoice HOR: " & radiochoiceha.GetProp("checked").Value& " + " & radiochoicehb.GetProp("checked").Value& " + " & radiochoicehc.GetProp("checked").Value& "
"
s = s & "Selectchoice1: " & selectchoice1.GetVal.Value & "
"
s = s & "Selectchoice2: " & selectchoice2.GetVal.Value & "
"
s = s & "Selectchoicemenu1: " & selectchoicemenu1.GetVal.Value & "
"
Output example
Textinput1: Value Textinpu1
Textarea1: Value Textarea1
Searchinput1: Value Searchinput1
Sliderflipswitch1: on
Slider1: 50
Controlgroupcheckbox VER: false + true + false
Controlgroupcheckbox HOR: false + true + false
Radiochoice VER: true + true + false
Radiochoice HOR: true + true + false
Selectchoice1: selectchoice1B
Selectchoice2: selectchoice2C
Selectchoicemenu1: selectchoicemenu1B
Hints
B4J Get Value Checkbox
Define: checkbox.GetProp("checked").Value
Returns: Boolean
B4J Get Value RadioButton
Define: radiobutton.GetProp("checked").Value
Returns: Boolean

Changed: , Category: WebApps jQuery Mobile, File: T6C282M2110.htm, ID: 2110