Issue with Radio button checked in JavaScript

Question

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();">

The loop will encounter a checked radio, and then return true, what were you expecting to happen in that situation? — David Thomas
– David Thomas, Commented Jul 7, 2014 at 7:45
Ignore the return true in checked loop. I was trying something, that's why I put that there. — Sid
– Sid, Commented Jul 7, 2014 at 7:56

Anonymoose · Accepted Answer · 2014-07-07 07:47:35Z

2

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;
}

answered Jul 7, 2014 at 7:47

Anonymoose

2,5017 gold badges40 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sid Over a year ago

Actually it should work but still form is getting submitted, though I haven't selected all the radio buttons.

Sid Over a year ago

Below is the form action: <form name="quizcreen" id="quizcreen" method="post" action="QuizResult.jsp" onsubmit = "return beforeSubmit();"> if I remove onsubmit = "return beforeSubmit();" then form is getting submitted inspite of Javascript validation otherwise(if onsubmit = "return beforeSubmit();" is there) javascript function is called twice and alert is generated twice. Thanks again for your help.

Anonymoose Over a year ago

@Sid works for me jsfiddle.net/zbxr6/4 . The only thing I changed is the qCount. Maybe try to alert this value, check if it's filled?

Sid · Accepted Answer · 2014-07-07 10:28:40Z

0

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;
    }

answered Jul 7, 2014 at 10:28

Sid

5823 gold badges9 silver badges32 bronze badges

Comments

it's me · Accepted Answer · 2014-07-07 07:48:17Z

-1

your problem is at least one to be checked.

do this stuff

function isRadioChecked() {
return ($('input[type=radio]:checked').size() > 0);

}

answered Jul 7, 2014 at 7:48

it's me

1881 gold badge1 silver badge10 bronze badges

2 Comments

David Thomas Over a year ago

Did you see a jQuery tag somewhere..?

it's me Over a year ago

Oh! Sorry I said the shortest way.

Collectives™ on Stack Overflow

Issue with Radio button checked in JavaScript

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related