URL Mapping - Select input
Select inputs by default based on url query string.
Example with source
Source code
<div data-wb-urlmapping='{
"f=b": {
"action": "selectInput",
"source": "#fruitsOptions",
"value": "Bananas"
}
}'></div>
<form id="fruitsOptions">
<label for="fruitsSelect">Select a fruit (<code><select></code>)</label>
<select name="fruitsSelect" id="fruitsSelect" class="form-control mrgn-bttm-lg">
<option value="all">All</option>
<option value="Bananas">Bananas</option>
<option value="Oranges">Oranges</option>
<option value="Apples">Apples</option>
</select>
<fieldset class="gc-chckbxrdio form-inline mrgn-bttm-lg">
<legend>Choose a fruit (<code><input type="checkbox"></code>)</legend>
<div class="checkbox label-inline">
<input type="checkbox" name="fruitsCheckboxes" id="BananasCheckbox" value="Bananas"><label for="BananasCheckbox">Bananas</label>
</div>
<div class="checkbox label-inline">
<input type="checkbox" name="fruitsCheckboxes" id="OrangesCheckbox" value="Oranges"><label for="OrangesCheckbox">Oranges</label>
</div>
<div class="checkbox label-inline">
<input type="checkbox" name="fruitsCheckboxes" id="ApplesCheckbox" value="Apples"><label for="ApplesCheckbox">Apples</label>
</div>
</fieldset>
<fieldset class="gc-chckbxrdio form-inline">
<legend>Choose a fruit (<code><input type="radio"></code>)</legend>
<div class="radio label-inline">
<input type="radio" name="fruitsRadios" id="BananasRadio" value="Bananas"><label for="BananasRadio">Bananas</label>
</div>
<div class="radio label-inline">
<input type="radio" name="fruitsRadios" id="OrangesRadio" value="Oranges"><label for="OrangesRadio">Oranges</label>
</div>
<div class="radio label-inline">
<input type="radio" name="fruitsRadios" id="ApplesRadio" value="Apples"><label for="ApplesRadio">Apples</label>
</div>
</fieldset>
</form>
Example without source
Source code
<label for="fruitsSelect2">Select a fruit (<code><select></code>)</label>
<select id="fruitsSelect2" class="form-control" data-wb-urlmapping='{
"f=g": {
"action": "selectInput",
"value": "Grapes"
}
}'>
<option value="all">All</option>
<option value="Oranges">Oranges</option>
<option value="Apples">Apples</option>
<option value="Grapes">Grapes</option>
</select>
<fieldset class="gc-chckbxrdio form-inline mrgn-bttm-lg" data-wb-urlmapping='{
"f=g": {
"action": "selectInput",
"value": "Grapes"
}
}'>
<legend>Choose a fruit (<code><input type="checkbox"></code>)</legend>
<div class="checkbox label-inline">
<input type="checkbox" name="fruitsCheckboxes2" id="BananasCheckbox2" value="Bananas"><label for="BananasCheckbox2">Bananas</label>
</div>
<div class="checkbox label-inline">
<input type="checkbox" name="fruitsCheckboxes2" id="OrangesCheckbox2" value="Oranges"><label for="OrangesCheckbox2">Oranges</label>
</div>
<div class="checkbox label-inline">
<input type="checkbox" name="fruitsCheckboxes2" id="GrapesCheckbox2" value="Grapes"><label for="GrapesCheckbox2">Grapes</label>
</div>
</fieldset>
<fieldset class="gc-chckbxrdio form-inline" data-wb-urlmapping='{
"f=g": {
"action": "selectInput",
"value": "Grapes"
}
}'>
<legend>Choose a fruit (<code><input type="radio"></code>)</legend>
<div class="radio label-inline">
<input type="radio" name="fruitsRadios2" id="BananasRadio2" value="Bananas"><label for="BananasRadio2">Bananas</label>
</div>
<div class="radio label-inline">
<input type="radio" name="fruitsRadios2" id="OrangesRadio2" value="Oranges"><label for="OrangesRadio2">Oranges</label>
</div>
<div class="radio label-inline">
<input type="radio" name="fruitsRadios2" id="GrapesRadio2" value="Grapes"><label for="GrapesRadio2">Grapes</label>
</div>
</fieldset>
Page details
- Date modified: