Language selection

Search


URL Mapping - Select input

Select inputs by default based on url query string.

Example with source

Choose a fruit (<input type="checkbox">)
Choose a fruit (<input type="radio">)
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

Choose a fruit (<input type="checkbox">)
Choose a fruit (<input type="radio">)
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: