I am working on a JSP page which is having multiple radio buttons with ids ans1, ans2, ans3... etc.. No of radio buttons varies depending upon on the response in previous page. User should select answer for all the radio buttons. i.e. user must select response for all the radio buttons ans1, ans2, ans3 ... etc. I have written a Javascript code for submit button click event as below for validation and to make sure user has responded to all the answers:
function beforeSubmit(){
var obj = document.quizcreen;
var qCount = obj.totQuesHidden.value;
for (var i=1; i<=qCount; i++){
if(document.getElementById("ans"+i).checked){
// checked
}else{
alert("Please select ateleast one option"); // unchecked
return false;
}
}
obj.submit();
return true;
}
For some reason above code is not working. The form should not be submitted if all the radio buttons are not selected. Please help, I know it's very simple and common issue, but I am unable to figure it out. Thanks in advance.
Also following is the form action:
<form name="quizcreen" id="quizcreen" method="post" action="QuizResult.jsp" onsubmit = "return beforeSubmit();">
You have a return true statement in your loop. So when the first radiobutton is checked, it will not check the other ones.
function beforeSubmit(){
var obj = document.quizcreen;
var qCount = obj.totQuesHidden.value;
var allChecked = true;
for (var i=1; i<=qCount; i++){
if(! document.getElementById("ans"+i).checked){
allChecked = false;
}
}
if(! allChecked){
alert("Please select ateleast one option"); // unchecked
return false
}
obj.submit();
return true;
}
Ok I found out a better way to handle my scenario, So I am sharing my code for your info:
function beforeSubmit() {
var obj = document.quizcreen;
var allChecked = true;
$("input:radio").each(function() {
var name = $(this).attr("name");
if ($("input:radio[name=" + name + "]:checked").length == 0) {
allChecked = false;
}
});
if (!allChecked) {
alert("Please answer all the questions."); // unchecked
return false;
}
obj.submit();
return true;
}
your problem is at least one to be checked.
do this stuff
function isRadioChecked() {
return ($('input[type=radio]:checked').size() > 0);
}
Related
I have this code to check that one from each group of radio buttons has been selected before the user can submit the form. It works fine in chrome, but in IE it always asks the user to answer all questions, even when they have. How can I change this to work correctly in all browsers?
<script>
function validate(){
if (checkRadio("Radio1") && checkRadio("Radio2") && checkRadio("Radio3")){
return true;
}else{
alert("Please answer all questions!");
return false;
}
}
function checkRadio(name){
var radio = document.forms.myForm[name];
for (var option in radio){
if(radio[option].checked){
return true;
}
}
return false;
}
</script>
The issue is in checkRadio() --- you should not use a fast/enhanced for loop with an array.
Calling for (var option in radio) simply returns the name of the radio button group each time (e.g., "Radio1").
You must use the long form for loop:
http://jsfiddle.net/ugZL9/
function checkRadio(name) {
var radio = document.forms.myForm[name];
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
return true;
}
}
return false;
}
So I got this bit of code where if I click a radio button I want these other radio buttons to be unclicked if they are cliked and also to be disabled.
So far they get disabled but however they do not get unclicked?
if (document.getElementById("None").checked) {
document.getElementById("HundredsAndThousands").clicked = false;
document.getElementById("ChocolateSprinkles").clicked = false;
document.getElementById("SilverBalls").clicked = false;
document.getElementById("Coconut").clicked = false;
document.getElementById("HundredsAndThousands").disabled = true;
document.getElementById("ChocolateSprinkles").disabled = true;
document.getElementById("SilverBalls").disabled = true;
document.getElementById("Coconut").disabled = true;
}
The property you need to change is called checked, not clicked:
document.getElementById("HundredsAndThousands").checked = false;
document.getElementById("ChocolateSprinkles").checked = false;
document.getElementById("SilverBalls").checked = false;
document.getElementById("Coconut").checked = false;
This can be done so much better, if you use a jQuery library. You can use .val() or .attr() to get the value of the radio button.
var str = $("#none").attr('checked');
var str = $("input:radio[name=radioname]:checked").val();
And .attr('checked', true); to change a radio button from checked (to unchecked). To change this on a group
$("input:radio[name=mygroup]").attr('checked',true);
I need to check, using jQuery, if any checkboxes on the page are checked. The particular checkbox set they are contained in doesn't matter, just any of them.
Any ideas?
Thanks!
var isChecked = $("input[type=checkbox]").is(":checked");
or
var isChecked = $('input:checkbox').is(':checked')
The following function returns true if there are any ticked checkboxes and false otherwise.
function anyCheckbox()
{
var inputElements = document.getElementsByTagName("input");
for (var i = 0; i < inputElements.length; i++)
if (inputElements[i].type == "checkbox")
if (inputElements[i].checked)
return true;
return false;
}
if($('checkbox:checked').length > 0)
//Some checkbox is checked
This should find any checkboxes on the page that are checked
if you only want to look at checkboxes, not radio buttons:
var isChecked = $("input:checkbox").is(":checked");
if you're ok with checkboxes or radio buttons:
var isChecked = $("input").is(":checked");
This works:
var ischecked =$('input[type=checkbox]:checked').length;
so
if (ischecked > 0)
then at least one is checked.
function checkbox(){
var ischecked =$('input[type=checkbox]:checked').length;
if (ischecked <= 0){ // you can change your condition
alert("No Record Selected");
return false;
}else
{
-------//your Action that you want
}
}
On
http://www.greekforme.com/999-apron-01.html, there are several Drop Down boxes.
The script called 'verifyselection' is supposed to show a pop-up box if the user does not change the drop down from 'Select an Option Below'
function verifyselection(form)
{
// result function
var blnResult = true;
// temp name form control
var nameControl = "";
// array of name of radio form controls
var arrNameControl = new Array();
// array of value checked of radio form controls
var arrValueControl = new Array();
// flag existence form control in array
var isExistOnArray = false;
// loop on all elements of form
for(i=0; i<form.elements.length; i++) {
// check type form control
if(form.elements[i].type=="radio") {
// save name form control
nameControl = form.elements[i].name;
// reset flag existence form control in array
isExistOnArray = false;
// loop on all found radio form control
for(j=0; j<arrNameControl.length; j++){
// if giving form control is exist in array
if(arrNameControl[j] == nameControl) {
// set flag
isExistOnArray = true;
// break loop
break;
}
}
// if giving form control is not exist in array
if(isExistOnArray == false){
// set index of array
j = arrNameControl.length;
// add new element to arrays
arrNameControl[j] = nameControl;
arrValueControl[j] = 0;
}
// if giving radio form control is checked
if(form.elements[i].checked == "1"){
arrValueControl[j] = 1;
}
}
if ((form.elements[i].selectedIndex > -1)) {
if (form.elements[i].selectedIndex == 0) {
var opttext = form.elements[i].value.toLowerCase();
if (opttext.indexOf('optional') < 0) {
blnResult = false;
alert('Please select one of the options from the list');
break;
}
}
}
}
// loop on all found radio form control
if(blnResult==true) {
for(j=0; j<arrNameControl.length; j++){
// if radio group form control is checked
if(arrValueControl[j] != 1) {
// set result function
blnResult = false;
// show error message
alert('Please select one of the options from the list');
break;
}
}
}
// return result function
return blnResult;
}
Currently, I can get the Pop-Up box to show when you click the Add to Cart button -
But... it still adds the items to cart.
I want the script to prevent the item from being added to cart if the user does not change the drop downs from 'Select an Option Below'
Where are you calling this function from? If it's in an onsubmit handler, the handler should return false. So, you should have this in your code somewhere:
form.onsubmit = function() {
return verifyselection(this);
}
Or, in html:
<form onsubmit="return verifyselection(this);" ...>
The important thing here being the return part. When the handler returns false, the default action won't be taken. In this case, the form won't submit.
Is there a way to check a form before submitting it to see if ANY of the checkboxes have been checked in Javascript?
Something like...
function checkboxcheck(){
/*something in here to check name="brands[]" checkbox array?*/
}
Basically I just want it to alert me if 0 checkboxes were selected. 1 or more is required.
I would call this function on submit.
Thanks much!!
You could do something like this:
function anyCheckboxesChecked() {
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
if (inputs[i].type === "checkbox" && inputs[i].checked)
return true;
}
return false;
}
Then you could call that function from your "submit" handler"
if (!anyCheckboxesChecked()) {
alert("Please check one of the appealing checkboxes on the page");
return false;
}
If your page is more complicated than what this implies (like, if there are multiple forms), then you'd find the appropriate form first and call .getElementsByTagName() from that point instead of from document.
How about:
function checkboxcheck(name) {
var els = document.getElementsByName(name);
for (var i = 0; i < els.length; i++) {
if (els[i].checked) {
return true;
}
}
return false;
}
using getElementsByName().
Usage:
var valid = checkboxcheck("brands[]");
Here's an example: http://jsfiddle.net/andrewwhitaker/2saJp/1/