This seems like a simple problem, but how do I create a basic HTML form that has a series of radio button options, with the last one being a text field to fill in a custom response (i.e. "Other").
What I have now:
Reason given for stop? <br>
<input type="radio" name="reason" value="Fit Description">Fit Description<br>
<input type="radio" name="reason" value="Suspicious Behavior">Suspicious Behavior<br>
<input type="radio" name="reason" value="No Reason Given">No Reason Given<br>
<input type="radio" name="reason" value="">Other<br>
Just add a text input field to it.
Reason given for stop? <br>
<input type="radio" name="reason" value="Fit Description">Fit Description<br>
<input type="radio" name="reason" value="Suspicious Behavior">Suspicious Behavior<br>
<input type="radio" name="reason" value="No Reason Given">No Reason Given<br>
<input type="radio" name="reason" value="">Other <input type="text" name="other_reason" />
jsFiddle example
Create a text field, and set it to display:none;
Then with jQuery, detect when the 'Other' radio button is checked and show the textbox.
Then on your process script, do and if statement to see if the value of your radio button group is "" (nothing), and grab the post data of the textbox and do what you want with it.
There is a neat way to add text field alongside radio buttons without using functions or Javascript (jQuery).
Just add the radio btn (Other) and the text field next to it, on the top of your HTML form. Here is what i use:
Color:
<input type="radio" name="title[<?=$red?>][color]" value="" <?php if ($row['color'] != ' ') {echo 'checked';} ?> />Other <input type="text" name="title[<?=$red?>][color]" value="<?php echo $row['color'] ?>" style="width: 200px;" /> |
<input type="radio" name="title[<?=$red?>][color]" value="natural" <?php if ($row['color'] == 'natural') {echo 'checked';} ?> />natural|
<input type="radio" name="title[<?=$red?>][color]" value="stain" <?php if ($row['color'] == 'stain') {echo 'checked';} ?> />stain |
<input type="radio" name="title[<?=$red?>][color]" value="white" <?php if ($row['color'] == 'white') {echo 'checked';} ?> />white|
Basically you do not put value on the "Other" radio input, but on the text input so whatever you write in the text field will be send to db - its 1st field in the FORM. If nothing in the text field - the other checked radio input will be processed.
Hope this helps.
Simply add a text field as you would normally but give it the same name attribute as the others, that way when accessing them you'll get one of them.
In JavaScript (which I assume you'll be using?) just access these elements and check the the textfield is empty, if it is get the radio buttons.
Related
We currently use the following syntax for radio buttons:
<input type="radio" id="opt1" name="option" value="opt1" required/>
<label for="opt1">Description of Option One</label>
<input type="radio" id="opt2" name="option" value="opt2" required/>
<label for="opt2">Description of Option Two</label>
The query-processing script receives the string "opt1", which it then needs to convert to the full-text description of the option. In PHP-speak, I get:
$_POST['option'] => "opt1"
I'd like to save that step and have the full text of the description to be submitted as the value:
$_POST['option'] => "Description of Option One"
Can this be done with HTML alone -- without resorting to JavaScript-rewriting hacks and without duplicating the description text in the HTML? Thanks!
Unfortunately not.
If you have control over the form, the best solution is to use the description for the value:
<input type="radio" id="opt1" name="option" value="Description of Option One" required/>
<label for="opt1">Description of Option One</label>
<input type="radio" id="opt2" name="option" value="Description of Option Two" required/>
<label for="opt2">Description of Option Two</label>
If you don't have control over the form, then javascript is your only solution, you could use a function like the below (either inside an onload event for the page or an onsubmit event on the form:
function radioUpdate() {
document.querySelectorAll('radio').forEach(function(input) {
input.value = document.querySelector('label[for="' + input.id + '"]').text();
});
};
No, it can't.
Consider generating the HTML from your server side code in the first place. You could write a PHP function that takes the label/value as a single argument.
Is it possible to have a single checkbox with two values ? i have a checkbox called "full-day ?".
<div class="input-field col s2">
<p>
<input type="checkbox" id="test6" value="yes" ng-model="isFull"/>
<label for="test6">Half Day</label>
</p>
</div>
if the user checks it a yes should be passed when i press submit button and if the checkbox is not checked a no have to be passed.As far as i know if the checkbox is not activated html treats as if checkbox is not present and it wont be included in the query string.Here using radio button is not an option.Please let me know how do i go about it.
This is simple:
<input type="hidden" id="test6" value="no" ng-model="isFull" checked>
<input type="checkbox" id="test6" value="yes" ng-model="isFull">
<label for="test6">Half Day</label>
It is boolean.
Code is processed sequentially
Only the last 'checked' answer is used.
Therefore put the 'non' answer first but hide it and leave it always checked. The positive answer comes second.
If the form is editable (user can come back and change their answer) code to check the single visible checkbox appropriately e.g.
<?php if ($fieldValue=='Yes' ){ echo 'checked'; } ?>
Works for me!
Not really.
You can fake things with JavaScript that injects hidden inputs, but this is better handled with server side code.
e.g.
my $value;
if ($request->param("checkbox_name") {
$value = "yes";
} else {
$value = "no";
}
How would i add the "value" that are selected from radio boxes in html forms? So when someone selects an option it would add the other "values" onto it and total that it at the bottom of the page. And does anyone know if it could add "names" total "values" onto it as well? thanks
My code looks like this:
<h3><u>Title</u></h3><br>
<form action="">
<input type="radio" name="num" value="0">Text<br>
<input type="radio" name="num" value="2">Text<br>
<input type="radio" name="num" value="80">Text<br>
<input type="radio" name="num" value="110">Text<br>
<input type="radio" name="num" value="85">Text<br>
<input type="radio" name="num" value="120">Text<br>
</form>
You cannot. By definition, a set of radio buttons with the same name attribute contributes at most one value to the data set, the one corresponding to the selected button.
If you want something else, you should handle that server side, or use other types of controls, or redesign the entire approach.
Working example :
(using a Javascript library, jQuery, but could be done in plain JavaScript)
You mainly have to change your inputs to type="checkbox" in the HTML
What code does : when a checkbox's state is modified, all checked checkboxes' value are summed up in the last input field I've added
The checkboxes are targetted by looking for "num" in their name, if you remove that the checkbox won't be taken into account by the script.
$(function() {
$("input[name*='num']").on("change", function() {
var total = 0;
$("input[type='checkbox']:checked").each(function() {
total += Number($(this).val());
});
$("#total").val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
<u>Title</u>
</h3>
<br>
<form action="">
<input type="checkbox" name="num0" value="0">Add 0<br>
<input type="checkbox" name="num2" value="2">Add 2<br>
<input type="checkbox" name="num80" value="80">Add 80<br>
<input type="checkbox" name="num110" value="110">Add 110<br>
<input type="checkbox" name="num85" value="85">Add 85<br>
<input type="checkbox" name="numwhateveryoulike" value="120">Add 120<br>
Total <input type="text" value="0" id="total">
</form>
I'd like to get a text through after a choice done between "English" and "French" (radio buttons) but I'm not sure how to associate both textareas and radio buttons.
<form action="_received-info.php" id="form_id" method="post" enctype="application/x-www-form-urlencoded" name="form-translation">
<p>Translation :</p>
<label for="Translation"> English </label>
<input type="radio" name="Translation_EN" id="Translation_EN" value="Translation" checked>
<label for="Translation"> French </label>
<input type="radio" name="Translation_FR" id="Translation_FR" value="Translation">
<textarea name="Translation">
<!-- Text translated into English or French -->
</textarea>
</form>
Then I'd like to get that text on my _received-info.php page by doing a
$_POST['Translation_EN'];
$_POST['Translation_FR'];
(one of them containing the text, the other empty).
Could anyone help me? Thank you in advance ^^`
In your case
$_POST['Translation_EN'];
and
$_POST['Translation_FR'];
both contain 'Translation' when you echo them on the next page.
As those are radios, I suppose you only want to have one selectable? If so, give both the same name.
Like:
<label for="Translation"> English </label>
<input type="radio" name="Translation" id="Translation_EN" value="EN" checked>
<label for="Translation"> French </label>
<input type="radio" name="Translation" id="Translation_FR" value="FR">
<textarea name="Text_to_translate">
<!-- Text translated into English or French -->
</textarea>
On the next page, you can do:
switch ($_POST['Translation']) {
case 'FR':
//do something with $_POST['Text_to_translate'];
break;
case 'EN':
//do something with $_POST['Text_to_translate'];
break;
}
I want to check multiple radio buttons, all radio buttons having same name but different ids.
Here is my html code,
<span style="float:left;margin:0 0 0 10px">Proactivity</span>
<label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Proactivity > Poor" name="q11[]">Poor</label>
<label for="q11" style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Proactivity > Good" name="q11[]">Good</label>
<br/><br/>
<span style="float:left;margin:0 0 0 10px">Service/support</span>
<label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Service/support > Poor" name="q11[]">Poor</label>
<label for="q11" style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Service/support > Good" name="q11[]">Good</label>
<br/><br/>
<span style="float:left;margin:0 0 0 10px">Provision of <br />specialist skills</span>
<label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Provision of specialist skills > Poor" name="q11[]">Poor</label>
<label for="q11" style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Provision of specialist skills > Good" name="q11[]">Good</label>
You can't. Radio buttons are there for a single choice. For multiple choices, you need checkboxes.
Wrapping your radio buttons in the form tag will allow for groups of radio buttons with the same name to function independently from each other.
http://jsfiddle.net/8qB56/
But looking at what you are trying to do, it is more appropriate for you to change the input name of each logical question, since you are working with what looks like a single form.
So perhaps you can change name="q11[]" to name="q11[proactivity]" for the proactivity question inputs, name="q11[service]" for the service question inputs, and name="q11[provision]" for the provision question inputs.
Doing this will allow all the selected responses from these inputs to stay in the q11 field on the server side, you can then massage the data however you want (I'm assuming q11 stands for "question 11" or something so that's why you are so insistant on keeping the same name for all these inputs).
When you use same name for all radio input they all fall in one group. It won't allow you to make separate actions.
You have to use different names for each radio group
Using radio buttons to select multiple items seems against the usability rule. If you do, you can provide different name for them.
PS: you should provide an external style sheet for every radio button. It'll be great if you want to make an adjustment later.
It works pls follow the link
http://jsfiddle.net/Cwalkdawg/3CxLD/2/
Since you insist using radios, I would go with a jQuery library to get your values. You can add a class to your radios and it will allow you to select that class and iterate through it. It's counter-intuitive and dirty, but it will work. This markup:
<input type="radio" class="rad" name="None" value="--" />None
<br />
<input type="radio" class="rad" name="Item1" value="Item1" />Item1
<br />
<input type="radio" class="rad" name="Item2" value="Item2" />Item2
<br />
<input type="radio" class="rad" name="Item3" value="Item3" />Item3
<br />
<input type="radio" class="rad" name="Item4" value="Item4" />Item4
<br />
Goes with this jQuery:
$(document).ready(function () {
$("#button").click(function () {
// Radios
$(".rad:checked").each(function() {
console.log("Radio: " + $(this).val());
});
});
})
In the fiddle, I added checkboxes too, just to show you how much more easy it is i.e. the following markup (which reads easier and is not as ambiguous):
<input name="choices" type="checkbox" value="something1" />Option 1
<br />
<input name="choices" type="checkbox" value="something2" />Option 2
<br />
<input name="choices" type="checkbox" value="something3" />Option 3
<br />
<input name="choices" type="checkbox" value="something4" />Option 4
<br />
Goes with this jQuery:
$("#button").click(function () {
//Check boxes
$("input:checkbox[name=choices]:checked").each(function() {
console.log("Checkbox: " + $(this).val());
});
});
You can't deselect a radio button unless you want to deselect all of them using either a reset element, which will reset your entire form, or creating a custom function just for radios (that would clear all the choices anyway).
The deselect could be routed to your name=None radio button with the following code:
$(".rad[name=None]").click(function() {
$(".rad").removeAttr("checked");
});
You can also put a number (a counter if you use js) inside your name-array like this:
Proactivity:
<input type="radio" name="myradio[0]"><input type="radio" name="myradio[0]">
Service/support:
<input type="radio" name="myradio[1]"><input type="radio" name="myradio[1]">
Provision of specialist skills:
<input type="radio" name="myradio[2]"><input type="radio" name="myradio[2]">