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";
}
Related
I am working on a web interface for taking inputs in such a way that imagine there are three radio buttons with specific functions,and one of radio input function also has number input along with it. Take a look at example:
<h2>How many cars you own?</h2>
<form>
<input type="radio" name="car" checked>One<br>
<input type="radio" name="car">Two<br>
<input type="radio" name="car">Specify
<input type="number" name="car"><br>
</form>
Actually this works, but I want my website to be a little more smart and dynamic, so the main problem is the moment I select a number from Choose, it should automatically mark the Specify radio button, but it doesn't.And if I am choosing One or Two as my choice, it should disable the number input with a blank interface.
I think you want something like this
var cars = document.getElementsByName("car");
cars[3].addEventListener("input", function(e) {
if (e.target.value < 1) {
e.target.value = 1;
}
if (e.target.value === 1) {
cars[2].checked = true;
} else {
cars[e.target.value - 1].checked = true;
}
});
<h2>How many cars you own?</h2>
<form>
<input type="radio" name="car" checked>One<br>
<input type="radio" name="car">Two<br>
<input type="radio" name="car">Specify
<input type="number" name="car" value="1"><br>
</form>
I have a form on my webpage and its being submitted to a NodeJS backend.
I'm having trouble with the checkboxes. When the are submitted to server, and I read them via req.body.foods, I get something like ['on', 'on', 'on'].
But I want to get the actual values, that is, something like ['dairy', 'fish'] etc.
How can I do that?
<div class="col-sm-6">
<div class="checkbox">
<label><input name="food" type="checkbox" value="dairy">Dairy</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="meat">Meat</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="fish">Fish</label>
</div>
</div>
You can do the following in the node.js file:
console.log(req.body.food); //This will print the array of values.
If you have only one checkbox selected in the page, (eg: Dairy) it will print "dairy". If more than one checkbox, then you get "{ 'dairy', 'meat' }" in the output. Make sure the checkboxes are within the form.
Another method:
Include a hidden input element in your form:
<input name="SelectedValues" type="hidden" value="">
Also include a call to a javascript file in the onchange event of every checkbox, or in the onclick event of the submit button in the form.
onclick='buildlist("YourCheckBoxName","SelectedValues");'
Use a javascript function to loop through your checkbox and build a comma separated list of selected values:
function buildlist(listName,labelName){
var controls = document.getElementsByName(listName);
var label = document.getElementsByName(labelName);
label.value = '';
for(var i=0;i<controls.length;i++){
label.value += controls[i].value.toString()+',';
}
}
Now inside the node.js file, use the following code to access the list of values:
req.body.SelectedValues
Looks like you are using bootstrap to generate your form checkboxes. Try using the "form-check" and "form-check-input" classes instead.
<div class="form-check">
<input class="form-check-input" type="checkbox" name="food" value="dairy" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">Dairy</label>
</div>
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.
I am writing a website and I am currently working on the sign up page. I have a drop down box and I want to have that drop down box open different sign up information for each one. For example: If they picked prime user it would change the sign up information they needed from just username and password to username, password, credit card number, and telephone number . OR if they picked partial user from the drop down list it would ask for username password and telephone. Any clue how to do this in HTML or any other computer language?
Assuming html like this:
Type:<br>
one <input type="radio" name="type" id="type-1" value="1" /><br>
two <input type="radio" name="type" id="type-2" value="2" />
<hr>
<form action="." METHOD="POST">
<input class="second" type="text" name="name" id="name" value="name" />
<input class="second" type="text" name="email" id="email" value="email" />
<input class="second" type="text" name="credit-card" id="credit-card" value="credit card" />
</form>
And css like this: (to hide all the form fields except for type choice)
.second{
display:none
}
You can use jQuery javascript library to show/hide the required form fields dynamically like this:
// when type radio button is pressed
$('#type-1,#type-2').change(function(){
// hide all form fields
$('.second').hide()
// if type is 1
if($('#type-1:checked').length){
// show name and email fields
$('#name,#email').show()
// else if type is 2
}else if($('#type-2:checked').length){
// show name, email and credit-card fields
$('#name,#email,#credit-card').show()
}
})
This is demonstrated here: http://jsfiddle.net/rBvLA/
The result must be processed by server side script using any language you choose.
You might want to look into any of the many fine server side tools available, such as asp.net, php, etc... you could also use javascript.
For instance, using JavaScript, you could have an event fire when they change the drop down and in the code for that event handler, you could modify the DOM in such a way as to display the appropriate form elements for each selection.
another jQuery solution:
Live Demo
$('#reg_type input[type=radio]').change(function() {
var type = $(this).attr('class');
$('#reg_fields div').each(function() {
if ($(this).hasClass(type)) {
$(this).show().removeAttr('disabled');
} else {
$(this).hide().attr('disabled','disabled');
}
});
});
I have a form with four yes-no questions, e.g.
I am age 18 or older. () Yes () No
HTML fragment:
<form>
...
<tr id="age_q">
<td class="prompt">I am age 18 or older.</td>
<td class="yesno">
<input type="radio" name="age" value="yes" id="age_y" class="required">
<label for="age_y">Yes</label>
<input type="radio" name="age" value="no" id="age_n">
<label for="age_n">No</label>
</td>
</tr>
...
It is a consent form; the user may not proceed to the next page unless all four questions are answered "yes." I was trying to enforce this rule with jQuery + validator plugin, but its notion of "required" for radio groups seems to be "some button was checked" rather than "this button was checked."
Can anyone suggest a technique? I am not married to jQuery+validator, I would happily use some other library if it does what I want easily. Ideally, the submit button would be enabled when and only when all four "yes" radio buttons were checked. (The PHB wanted each of the questions, and the final submit button, to appear when and only when the previous "yes" button was checked, but I think that's going to be ugly and confusing.)
set your "no" radios to have a class .no or something:
if ($('.no:checked').length) {
//not valid
} else {
//valid
}
here's a working sample: http://jsbin.com/oguzi4/edit