In the image below, if I click either male or female text, I want the checkbox to be checked. How can I do that?
Second option is to wrap both checkbox and text in a label. It will work too:
<label>
<input id="male_checkbox" name="gender" type="checkbox" value="male" /> Male
</label>
You need to use label with for attribute:
<label for="male_checkbox">Male</label>
<input id="male_checkbox" name="gender" type="checkbox" value="male" />
<input type="checkbox" name="male" id="male" value="male"><label for="male">Male</label>
This will allow the user to click either the name or the checkbox
Do the same for female.
Related
I have a drop down that's numbered 1-30. So if I select '2', my radio buttons will appear like this:
<input type="radio" id="yes-sdf-1" name="field[1][sdfradio]" value="Yes" />
<input type="radio" id="no-sdf-1" name="field[1][sdfradio]" value="No" />
<input type="radio" id="yes-sdf-2" name="field[2][sdfradio]" value="Yes" />
<input type="radio" id="no-sdf-2" name="field[2][sdfradio]" value="No" />
How do I get the individual values of the radio buttons because I want to set conditions that will only affect those with the same name.
Here is an example to give you an idea.
Try this:
$('input:radio').click(function(){
alert($(this).attr('name'));
});
This will return the name of the radio button.
JSFiddle
I am making a form and the radio button html is
<p>Response Required?
<label><input type="radio" name="required" vaule="yes" checked="checked">Yes</label>
<label><input type="radio" name="required" value="no" >No</label>
</p>
however when looking at the $_POST data after the form is submitted I get [required] => on instead of a "yes" or "no" any thoughts?
Try first to fix "vaule" to "value".
<p>Response Required?
<label><input type="radio" name="required" value="yes" checked="checked">Yes</label>
<label><input type="radio" name="required" value="no" >No</label>
</p>
value spelling is wrong at 1st radio button
For my app I need to fetch the data from the database and mark fields accordingly. I am stuck with how to mark the radio button based on the value fetched. I am sharing the code I wrote to fetch the data and the radio button which I need to check.
$Medical_Record_Id=$_SESSION['Medical_Record_Id'];
$DOL=$_SESSION['DOL'];
$hour=$_SESSION['hour'];
$Question1="xxx";
$data1 = 'SELECT Option_Selected FROM Form1 WHERE Medical_Record = "'.$Medical_Record_Id.'" and DOL="'.$DOL.'" and hour="'.$hour.'" and Question="'.$Question1.'"' ;
$query = mysql_query($data1) or die("Couldn't execute query. ". mysql_error());
The html code which I have for the radio button is
<div>
<span>
<input type="radio" name="Gestational_age" class="field checkbox" value="<28" tabindex="7" />
<label class="choice" for="Gestational_age"><28</label>
</span>
<span>
<input type="radio" name="Gestational_age" class="field checkbox" value="28-31" tabindex="7" />
<label class="choice" for="Gestational_age">28-31</label>
</span>
<span>
<input type="radio" name="Gestational_age" class="field checkbox" value=">=32" tabindex="7" />
<label class="choice" for="Gestational_age">>=32</label>
</span>
</div>
Please guide me in how to check the radio button based on the value I am fetching in $query .
First of all, your HTML is really messed up. If you want to use symbols such as >, < in HTML attribute values or as text to display in the labels, you should convert them to the respective HTML entities, e.g., <, >.
After that, if you need to mark a value as selected, you should use the checked attribute on the specific <input> control:
<input type="radio" checked="checked" .... >
In order to show your input checked put some like below, see the second input
<form>
<input type="radio" name="Gestational_age" class="field checkbox" value="<28" tabindex="7">
<input type="radio" name="Gestational_age" class="field checkbox" value="28-31" tabindex="7" checked="checked">
<input type="radio" name="Gestational_age" class="field checkbox" value=">=32" tabindex="7">
</form>
I currently have a form with lets say 5 radio button entries (see below).
What im looking archive is the following:
- Being able to choose multiple radio buttons - lets say 3 and submit the form.
Currently I got it working fine with PHP, SQL, but im only able to choose one radiobutton and submit that.
I figure it would also come in handy being able to deselect a radio button in case you wrongly click one.
My guess is that this can be done through some javascript? Any suggestions? Online examples perhaps?
<form id="pollform" action="poll.php" method="post">
<input id="option-1" type="radio" value="1" name="poll">
<label for="option-1">Select option 1</label>
<input id="option-2" type="radio" value="2" name="poll">
<label for="option-2">Select option 2</label>
<input id="option-3" type="radio" value="3" name="poll">
<label for="option-3">Select option 3</label>
<input id="option-4" type="radio" value="4" name="poll">
<label for="option-4">Select option 4</label>
<input id="option-5" type="radio" value="5" name="poll">
<label for="option-5">Select option 5</label>
</form>
Radio buttons are designed so that only one option from each group (as designated by their shared name) can be selected at once (just like you can only tune a radio to one station).
The input control which allows any number of options to be selected is the checkbox. If you append [] to their names, then the selected options will arrive on the PHP side as an array.
<input type="checkbox" value="1" name="poll[]" />
<input type="checkbox" value="2" name="poll[]" />
As it has same name poll you will not be able to do that as input type radio is specialized in selecting a single value from multiple inputs.
You can use input type checkbox for that and make them as an array:
<form id="pollform" action="poll.php" method="post">
<input id="option-1" type="checkbox" value="1" name="poll[]">
<label for="option-1">Select option 1</label>
<input id="option-2" type="checkbox" value="2" name="poll[]">
<label for="option-2">Select option 2</label>
<input id="option-3" type="checkbox" value="3" name="poll[]">
<label for="option-3">Select option 3</label>
<input id="option-4" type="checkbox" value="4" name="poll[]">
<label for="option-4">Select option 4</label>
<input id="option-5" type="checkbox" value="5" name="poll[]">
<label for="option-5">Select option 5</label>
</form>
LIMIT (with jQuery) the number:
$("input[type=checkbox][name=poll[]]").click(function() {
var numberSel = $("input[type=checkbox][name=poll[]]:checked").length >= 3;
$("input[type=checkbox][name=poll[]]").not(":checked").attr("disabled",numberSel);
});
Radio buttons are designed for only 1 item to be selected, use checkboxes instead.
I have this:
<td>
<input id="sex" name="sexFemale" value="female" type="radio">
<label for="sexFemale">
Kvinna
</label>
</td>
<td>
<input id="sex" name="sexBoth" value="both" checked="checked" type="radio">
<label for="sexBoth">
Båda
</label>
</td>
<td>
<input id="sex" name="sexMale" value="male" type="radio">
<label for="sexMale">
Man
</label>
</td>
I think I made this wrong, how should I use it?
$_POST["sex"] to get the value "male" or "female" or what they chosed
You should set their name attribute to "sex" and have them carry diffrerent values:
<input type="radio" name="sex" value="female" />Female<br />
<input type="radio" name="sex" value="male" />Male<br />
the name of the radiobuttons has to be the same, not the id (the id must be unique)
You need to give them the same name (the name of the radio button group) attribute and different id attributes to work:
<td>
<label><input id="sexFemale" name="groupSex" value="female" type="radio">
Kvinna</label>
</td>
<td>
<label><input id="sexBoth" name="groupSex" value="both" checked="checked" type="radio">
Båda</label>
</td>
<td>
<label><input id="sexMale" name="groupSex" value="male" type="radio">
Man</label>
</td>
i think than all radio button inputs in one group must have the same 'name' attribute:
Kvinna
Båda
Man
$_POST['sex'] returns are element value with name attribute "sex". For use it - set all radiobutons name to "sex".
Just switch your name attributes with your id attributes. So instead of
<input id="sex" name="sexFemale" ...
just use
<input id="sexFemale" name="sex" ...