In html for radio button I have this:
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female <br />
and for check list:
<input name="checkboxvar[]" type="checkbox" value="dog" />Dog</td>
<input name="checkboxvar[]" type="checkbox" value="cat" />Cat</td>
<input name="checkboxvar[]" type="checkbox" value="rabbit" />Rabbit</td>
For the radio buttons how can I make them required and for the checkbox to take the result if the user select more than 1 values?
For the previous fields I use a submit button
<input type="submit" name="submit" id="submit" value="submit" />
by using required attribute as follows:-
<input type="radio" name="sex" value="male" required />Male
For making a radio button required, use the required tag (you only need add the required tag for one radio input per group):
<input type="radio" name="sex" value="male" required/> Male<br />
The required attribute is shorthand for required="required" or required="true" (the fact that its there constitutes a 'truthy' value, as does any (nonempty) string).
For making at least one of the checkboxes required: An answer has already been provided here; this basically states that, given a <button> element with and id of checkBtn, the following code can help (with some of my comments on it):
$(document).ready(function () {
// grabbing the button's element and adding an
// onclick event to it
$('#checkBtn').click(function() {
// grabs all elements which are checkboxes and
// are checked; if none are checked, the length
// is zero; else, the length is a 'truthy' value
checked = $("input[type=checkbox]:checked").length;
// if no elements are checked
if(!checked) {
// error handling
alert("You much check at least one checkbox.") return false;
}
});
});
Assuming that you want to detect the error upon the submit button's click; if you want to handle the error otherwise, you might want to clarify that (your answer is a tad vague).
Hope it helps!
Related
So, I have a questions regarding the input type radio in HTML. As you know, you can put checked as a value, this will mark it as checked.
The story is I am getting a 0 or 1 value from my database. I am then checking if it's 0 or 1 and will then mark one of the radio button's as checked.
My code is as follows:
<?php if($pay_op == 0) { ?>
<input type="radio" value="paypal" id="pay_op" checked>PayPal<br />
<input type="radio" value="other" id="other_op">Other<br/>
<input type="submit" id="pay_op_submit" />
<?php } elseif ($pay_op == 1) { ?>
<input type="radio" value="paypal" id="pay_op">PayPal<br />
<input type="radio" value="other" id="other_op" checked>Other<br/>
<input type="submit" id="pay_op_submit" />
<?php } ?>
My problem now is, whenever I try to mark the other radio button as checked by clicking on it, both radio buttons are checked?
I thought that this might have something to do with me checking if the value returned from the database is 0 or 1 and it will keep one of the radio buttons checked until that value is changed. Now my question is, does anyone know a solution to this issue so that whenever someone clicks on something different than the default checked radio button it will actually check that one and not both of them?
Any tips are highly appreciated! =)
Thanks!
Radio buttons work basically as a named group. The browser only un-checks a radio button if it is linked to the other radio buttons with a property called name.
<?php
if($pay_op == 0)
{ ?>
<input name ="myGroup" type="radio" value="paypal" id="pay_op" checked>PayPal<br />
<input name ="myGroup" type="radio" value="other" id="other_op">Other<br/>
<input name ="myGroup" type="submit" id="pay_op_submit" />
<?php
}
elseif($pay_op == 1)
{ ?>
<input name ="myGroup" type="radio" value="paypal" id="pay_op">PayPal<br />
<input name ="myGroup" type="radio" value="other" id="other_op" checked>Other<br/>
<input name ="myGroup" type="submit" id="pay_op_submit" />
<?php
}
?>
I have a form that did submit 1 out of 8 radio buttons to a php $_POST super global array. Therefore, I needed some validation. I was kindly helped by being provided this code which works great:
$("#form").submit(function (event) {
if(!$(":radio:checked").length) {
alert("You must select at least one emotional state!");
event.preventDefault();
}
});
However, I have now been asked to have 2 sets of 8 radio buttons in which the user selects 2 answers instead of the initial 1 answer. I need the code to be able to determine that at least one radio button from each set of 8 buttons has been selected before the form is submitted. At the moment the code checks to see if any radio buttons have been selected, then as soon as just 1 buttons is selected, the function is satisfied and transitions to the next page, which is not what I want.
EDIT
Buttons code:
<p><input type="radio" value="happy" name="perceived_emotion">Happy
<input type="radio" value="excited" name="perceived_emotion">Excited
<input type="radio" value="angry" name="perceived_emotion">Angry
<input type="radio" value="frustrated" name="perceived_emotion">Frustrated
<input type="radio" value="miserable" name="perceived_emotion">Miserable
<input type="radio" value="sad" name="perceived_emotion">Sad
<input type="radio" value="tired" name="perceived_emotion">Tired
<input type="radio" value="relaxed" name="perceived_emotion">Relaxed</p>
<p><input type="radio" value="happy" name="induced_emotion">Happy
<input type="radio" value="excited" name="induced_emotion">Excited
<input type="radio" value="angry" name="induced_emotion">Angry
<input type="radio" value="frustrated" name="induced_emotion">Frustrated
<input type="radio" value="miserable" name="induced_emotion">Miserable
<input type="radio" value="sad" name="induced_emotion">Sad
<input type="radio" value="tired" name="induced_emotion">Tired
<input type="radio" value="relaxed" name="induced_emotion">Relaxed</p>
Here is the form code:
<form id="form" action="audio_handler.php?id=1" method="POST">
<div id="perceived_emotions">
<?php include("includes/induced_emotion_buttons.php"); ?>
</div>
<br />
<div id="induced_emotions">
<?php include("includes/perceived_emotion_buttons.php"); ?>
</div>
<p class="right"><input type="submit" name="submit" value="Submit"></p>
</form>
What you want to do is use the [name="value"] selector in JQuery in conjunction with the :checked selector. So your new code would be:
if(!$('input[name="perceived_emotion"]:checked').length) {
alert("You must select at least one perceived emotional state!");
event.preventDefault();
return false;
}
if(!$('input[name="induced_emotion"]:checked').length) {
alert("You must select at least one induced emotional state!");
event.preventDefault();
return false;
}
All of that wrapped into the form event.
EDIT: Since you only want to display one dialog at once, just add return false; in each if statement.
I have 5 radio buttons that offer a range of values :
<input type="radio" name="bookperiod" id="bookperiod" value="1"/>1<br>
<input type="radio" name="bookperiod" id="bookperiod" value="2"/>2<br>
<input type="radio" name="bookperiod" id="bookperiod" value="3"/>3<br>
<input type="radio" name="bookperiod" id="bookperiod" value="4"/>4<br>
<input type="radio" name="bookperiod" id="bookperiod" value="5"/>5<br>
I want it to make sure the user has selected them, because currently the user can not select one and the form will still submit. While I could make one of them "checked", this could mean the user could still submit without actually making a selection.
How can I make sure that when the user hits submit the user has definitely selected one of their of accord.
This is a typical use-case for the required attribute.
Modern browsers don't let you submit the form if no radio button is selected, even with JavaScript disabled.
<form action="">
<input type="radio" name="bookperiod" id="bookperiod" value="1" required />1<br />
<input type="radio" name="bookperiod" id="bookperiod" value="2" required />2<br />
<input type="radio" name="bookperiod" id="bookperiod" value="3" required />3<br />
<input type="radio" name="bookperiod" id="bookperiod" value="4" required />4<br />
<input type="radio" name="bookperiod" id="bookperiod" value="5" required />5<br />
<button type="submit">Submit</button>
</form>
http://jsfiddle.net/feeela/5cJj8/
A simple JS validation for required radio buttons:
document.forms[0].addEventListener( 'submit', function( event ) {
event.preventDefault();
var form = event.target,
radioHasCheckedButton = form.querySelector( 'input[required][name="bookperiod"]:checked' );
if( !radioHasCheckedButton ) {
// Error handling here – no radio button was checked
console.log( 'Some required fields are missing.' );
}
else {
// Everything is fine – finally submit the form
form.submit();
}
}, false );
I feel like all these answers are barely getting by. First of all: you CANNOT have multiple elements with the same ID. Change that to a class or label each one uniquely!
You cannot skip the PHP check. This must always be done. Please read contents related to server-side vs client-side especially on validation. I won't go into it here.
Adding the client-side (Javascript) check is for user convenience ONLY. This allows the user to know the form is incomplete before hitting the submit button and having to wait on the server.
This can be done in a couple of ways and more...
Add an additional radio button with visibility or display turned off with CSS. This would be checked by default. With javascript you can see if this is still the radio button that is selected (meaning the user has not selected one of the visible ones) => display error
Iterate over each radio button and ensure one of them is marked checked (standard if inside a for loop) untested jqyery code.
function validateBookPeriod() {
var bookperiodSelected = false;
$('.bookperiod').each(function(){
if($this.attr('checked') == checked) bookperiodSelected=true;
});
if (bookperiodSelected == false)
alert('Please select a book period!');
}
validateBookPeriod();
you can pre-select one for the user, then the user will be forced to select another option or accept the first
<input type="radio" checked name="bookperiod" id="bookperiod" value="1"/>1<br>
<input type="radio" name="bookperiod" id="bookperiod" value="2"/>2<br>
<input type="radio" name="bookperiod" id="bookperiod" value="3"/>3<br>
<input type="radio" name="bookperiod" id="bookperiod" value="4"/>4<br>
<input type="radio" name="bookperiod" id="bookperiod" value="5"/>5<br>
Im trying to create a form using PHP and I cant seem to find a tutorial on what I need so thought Id ask on here.
I have a multiple checkbox option on my page...
<li>
<label>What service are you enquiring about?</label>
<input type="checkbox" value="Static guarding" name="service">Static guarding<br>
<input type="checkbox" value="Mobile Patrols" name="service">Mobile Patrols<br>
<input type="checkbox" value="Alarm response escorting" name="service">Alarm response escorting<br>
<input type="checkbox" value="Alarm response/ Keyholding" name="service">Alarm response/ Keyholding<br>
<input type="checkbox" value="Other" name="service">Other<input type="hidden" value="Other" name="service"></span>
</li>
I'm not sure however how to collect all checkbox values using POST method?
if i use
$service = $_POST['service'];
I only get 'other' returned
Name the fields like service[] instead of service, then you'll be able to access it as array. After that, you can apply regular functions to arrays:
Check if a certain value was selected:
if (in_array("Other", $_POST['service'])) { /* Other was selected */}
Get a single newline-separated string with all selected options:
echo implode("\n", $_POST['service']);
Loop through all selected checkboxes:
foreach ($_POST['service'] as $service) {
echo "You selected: $service <br>";
}
Currently it's just catching your last hidden input. Why do you have that hidden input there at all? If you want to gather information if the "Other" box is checked, then you have to hide the
<input type="text" name="other" style="display:none;"/>
and you can show it with javascript when the "Other" box is checked. Something like that.
Just make the name attribute service[]
<li>
<label>What service are you enquiring about?</label>
<input type="checkbox" value="Static guarding" name="service[]">Static guarding<br />
<input type="checkbox" value="Mobile Patrols" name="service[]">Mobile Patrols<br />
<input type="checkbox" value="Alarm response escorting" name="service[]">Alarm response escorting<br />
<input type="checkbox" value="Alarm response/ Keyholding" name="service[]">Alarm response/ Keyholding<br />
<input type="checkbox" value="Other" name="service[]">Other</span>
</li>
Then in your PHP you can access it like so
$service = $_POST['service'];
echo $service[0]; // Output will be the value of the first selected checkbox
echo $service[1]; // Output will be the value of the second selected checkbox
print_r($service); //Output will be an array of values of the selected checkboxes
etc...
<input type="checkbox" value="Other" name="service">Other<input type="hidden" value="Other" name="service"></span>
You've got a hidden input field with the same name as the checkbox. "later" fields with the same name as an earlier one will overwrite the previous field's values. This means that your form, as posted above, will ALWAYS submit service=Other.
Given the phrasing of your question in the html, it sounds more like you'd want a radio button, which allows only ONE of a group of same-name fields to be selected. Checkboxes are an "AND" situation, radio buttons correspond to "OR"
hi
currently am developing my website for payment process. most probably i have completed my work on it. whats my question in my website finally i mentioned payment delivery details which has three radio buttons with values (in pounds).after customer clicks that those buttons the corresponding value should add with addcart and display the final amount. this is the web page i need http://spsmobile.co.uk/make-payment.php/ am tottaly confusing what code should i apply on it.
can any one post me the correct code.
happy new year
thanks in adv
Using Radio Buttons:
HTML
For each option you create a radio Button:
...
<input type="radio" name="delivery" value="signed" cheked="cheked">text bla</input>
<input type="radio" name="delivery" value="special">more text bla</input>
<input type="radio" name="delivery" value="international">even more text bla</input>
Notie that they all share a common name ("delivery").
The option with the checked="checked" attribute will be selected by default,
PHP
I your user submits the form you can acess the selected option with $_POST["delivery"] or $_GET["delivery]. which ine contains the data depends on wheter you use GET or POST for your form.
You cn specify this in the main form element:
<form ... method="POST">...
Change your form's radio fields to following:
<input name='totalamount' id='totalamount' value='0' />
<div id='rmr'>
<input name="rmr" id="rmr_signed" type="radio" value="3" />
<input name="rmr" id="rmr_special" type="radio" value="5.5" />
<input name="rmr" id="rmr_international" type="radio" value="10" />
</div>
Now by using jquery you can write
in function show_make_payment_validation write
jQuery('#rmr input[type=radio]').each(function(){
var total = parseInt(jQuery('input[name="rmr"]:checked', '#myForm').val()) + parseInt(jQuery('#totalamount').val());
jQuery('#totalamount').val(total);
}
Why not just give your radio buttons a quick onclick event and update the total accordingly?
Somthing like:
Total: £<span id="total_amt" class="repair-finalamount-txt">0.00</span>
...
<input name="rmr" type="radio" title="3.00" value="1">
<input name="rmr" type="radio" title="5.50" value="2">
<input name="rmr" type="radio" title="10.00" value="3">
...
And for jQuery code:
jQuery('input[type="radio"][name="rmr"]').click(function() {
jQuery('span#total_amt').val(jQuery(this).attr('title'));
});
I haven't ran or tested it, so no guarantee the above code is flawless ;)