If i have two inputs of type text with the same name, like this:
<input type="text" name="task" id="task1" value="begin">
<input type="text" name="task" id="task2" value="end">
When i submit the form task is automatically sent as an array (task[0]='begin', task[1]='end').
This is very useful for many reasons, for instance i don't have to worry about serializing the result, I can use a sortable to re-sort and when I submit it's already in the right order.
But if i want to use radio buttons, i have to use several inputs with the same name already.
Is there a way I could keep this functionality with radio buttons?
For instance:
<input type="text" name="task" id="task1" value="begin">
<input type="radio" name="time" id="time11" value="early" checked="checked">
<input type="radio" name="time" id="time12" value="noon">
<input type="radio" name="time" id="time13" value="late">
<input type="text" name="task" id="task2" value="end">
<input type="radio" name="time" id="time21" value="early">
<input type="radio" name="time" id="time22" value="noon" checked="checked">
<input type="radio" name="time" id="time23" value="late">
I want that when submitted i get time[0]='early' and time[1]='noon'
Try this:
<input type="text" name="task[0]" id="task1" value="begin">
<input type="radio" name="time[0]" id="time11" value="early" checked="checked">
<input type="radio" name="time[0]" id="time12" value="noon">
<input type="radio" name="time[0]" id="time13" value="late">
<input type="text" name="task[1]" id="task2" value="end">
<input type="radio" name="time[1]" id="time21" value="early">
<input type="radio" name="time[1]" id="time22" value="noon" checked="checked">
<input type="radio" name="time[1]" id="time23" value="late">
Then you'd get: task[0]=begin, time[0]=early, task[1]=end and time[1]=noon.
Related
I need some help. The question is how to put in the "for" attribute two "id" parameters from input? or how a can do with label in other way?
<label for="address">Address: </label>
<input class="form-style" type="text" name="address" id="address"/>
<label for="gender1 gender2">Gender:</label>
<input class="gender" type="radio" name="gender" id="gender1" value="Male"/>Male
<input class="gender" type="radio" name="gender" id="gender2" value="Female"/>Female
You can't. A label is for a single form control. Each radio button should have its own label.
Use a fieldset to group multiple controls, and a legend to describe the controls with it in.
<label for="address">Address: </label>
<input class="form-style" type="text" name="address" id="address" />
<fieldset>
<legend>Gender</legend>
<input class="gender" type="radio" name="gender" id="gender1" value="Male" />
<label for="gender1">Male</label>
<input class="gender" type="radio" name="gender" id="gender2" value="Female" />
<label for="gender2">Female</label>
<input class="gender" type="radio" name="gender" id="gender3" value="Other" />
<label for="gender3">Other</label>
<input class="gender" type="radio" name="gender" id="gender4" value="Prefer not to say" />
<label for="gender4">Prefer not to say</label>
</fieldset>
Is it possible to have multiple radio button groups in a single form? Usually selecting one button deselects the previous, I just need to have one of a group deselected.
<form>
<fieldset id="group1">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
<fieldset id="group2">
<input type="radio" value="">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
</form>
Set equal name attributes to create a group;
<form>
<fieldset id="group1">
<input type="radio" name="group1">value1</input>
<input type="radio" name="group1">value2</input>
</fieldset>
<fieldset id="group2">
<input type="radio" name="group2">value1</input>
<input type="radio" name="group2">value2</input>
<input type="radio" name="group2">value3</input>
</fieldset>
</form>
This is very simple you need to keep different names of every radio input group.
<input type="radio" name="price">Thousand<br>
<input type="radio" name="price">Lakh<br>
<input type="radio" name="price">Crore
</br><hr>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Other
Just do one thing,
We need to set the name property for the same types. for eg.
Try below:
<form>
<div id="group1">
<input type="radio" value="val1" name="group1">
<input type="radio" value="val2" name="group1">
</div>
</form>
And also we can do it in angular1,angular 2 or in jquery also.
<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>
in input field make name same
like
<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >
To create a group of inputs you can create a custom html element
window.customElements.define('radio-group', RadioGroup);
https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47
to keep selected option in each group, you need to add name attribute to inputs in group, if you not add it then all is one group.
Is it possible to have multiple radio button groups in a single form? Usually selecting one button deselects the previous, I just need to have one of a group deselected.
<form>
<fieldset id="group1">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
<fieldset id="group2">
<input type="radio" value="">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
</form>
Set equal name attributes to create a group;
<form>
<fieldset id="group1">
<input type="radio" name="group1">value1</input>
<input type="radio" name="group1">value2</input>
</fieldset>
<fieldset id="group2">
<input type="radio" name="group2">value1</input>
<input type="radio" name="group2">value2</input>
<input type="radio" name="group2">value3</input>
</fieldset>
</form>
This is very simple you need to keep different names of every radio input group.
<input type="radio" name="price">Thousand<br>
<input type="radio" name="price">Lakh<br>
<input type="radio" name="price">Crore
</br><hr>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Other
Just do one thing,
We need to set the name property for the same types. for eg.
Try below:
<form>
<div id="group1">
<input type="radio" value="val1" name="group1">
<input type="radio" value="val2" name="group1">
</div>
</form>
And also we can do it in angular1,angular 2 or in jquery also.
<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>
in input field make name same
like
<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >
To create a group of inputs you can create a custom html element
window.customElements.define('radio-group', RadioGroup);
https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47
to keep selected option in each group, you need to add name attribute to inputs in group, if you not add it then all is one group.
The below HTML code i have allows multiple selection of radio button ? How do i limit it so that only one can be chooses at a time from the list
<fieldset data-role="controlgroup">
<legend></legend>
<label for="Arrived/Left">Arrived/Left Destination</label>
<input type="radio" name="Arrived/Left" id="Arrived/Left" value="Arrived/Left">
<label for="Delayed">Delayed</label>
<input type="radio" name="Delayed" id="Delayed" value="Delayed">
<label for="Canceled">Canceled</label>
<input type="radio" name="Canceled" id="Canceled" value="Canceled">
<label for="getupdate">Post to Get Update ?</label>
<input type="radio" name="getupdate" id="getupdate" value="getupdate">
<label for="Other">Other</label>
<input type="radio" name="Other" id="Other" value="Other">
</fieldset>
First this is not jQuery.. this is HTML..
Second you can do that by giving all the radio buttons of the same group (where you want only one to be selected) the same name..
<fieldset data-role="controlgroup">
<legend></legend>
<label for="Arrived/Left">Arrived/Left Destination</label>
<input type="radio" name="status" id="Arrived/Left" value="Arrived/Left">
<label for="Delayed">Delayed</label>
<input type="radio" name="status" id="Delayed" value="Delayed">
<label for="Canceled">Canceled</label>
<input type="radio" name="status" id="Canceled" value="Canceled">
<label for="getupdate">Post to Get Update ?</label>
<input type="radio" name="status" id="getupdate" value="getupdate">
<label for="Other">Other</label>
<input type="radio" name="status" id="Other" value="Other">
</fieldset>
use name attribute to group your radio button
<fieldset data-role="controlgroup">
<legend></legend>
<label for="Arrived/Left">Arrived/Left Destination</label>
<input type="radio" name="status" id="Arrived/Left" value="Arrived/Left">
<label for="Delayed">Delayed</label>
<input type="radio" name="status" id="Delayed" value="Delayed">
<label for="Canceled">Canceled</label>
<input type="radio" name="status" id="Canceled" value="Canceled">
<label for="getupdate">Post to Get Update ?</label>
<input type="radio" name="status" id="getupdate" value="getupdate">
<label for="Other">Other</label>
<input type="radio" name="status" id="Other" value="Other">
</fieldset>
You define radio button groups with the name property (radio buttons with the same name belong to the same group).
You are having a different name for each of your radio. Change the names of all the input radio to a single name. The radios having the same name will behave as a single group which is what your requirement.
*You haven't closed the input tags.
Hope this helps.
I would like to implement something similar to a google search with radio buttons. Depending on the radio button selected, would change the type of search (search,images,video, etc).
Right now I have:
<div id ="searchtext">
<form method="get" id ="searchbox" action="http://www.google.com/search"/>
<input type="text" name="q" size="30" class="searchtext" maxlength="255" value="" />
<input type="image" value="Search" class="searchbutton" src="images/searchbar/searchbutton.png"/>
<br/>
</div>
<div id="radiosearch">
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://www.google.com/search?q=';" checked="checked"/> Web
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://images.google.com/images?q=';"/>Images
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://maps.google.com/maps?hl=en&tab=wl?q=';"/>Maps
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://www.youtube.com/results?q=';"/>Youtube
<span class = "class1">
Change Theme
</span>
</div>
However, clicking on the radio boxes is not changing the form action. Any Ideas?
Try
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://www.google.com/search?q=';" checked="checked"/> Web
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://images.google.com/images?q=';"/>Images
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://maps.google.com/maps?hl=en&tab=wl?q=';"/>Maps
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://www.youtube.com/results?q=';"/>Youtube