Javascript form (with radio buttons) validation not working

Question

This code was working earlier today, then randomly stopped, something must of changed, but I can't work out what - please see below:

**UPDATE - code update below. Now it correctly recognises if a radio button is checked or not, however if a user tries to resubmit the form after an alert is displayed, the recognised state fails to update. Is a loop of some kind needed?

  function checkForm()
{
var x=document.forms["sdcomp"]["name"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
var x=document.forms["sdcomp"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Please enter a valid e-mail address");
return false;
}
if (document.getElementById("questionone").checked==false)
{
alert("Question one must be completed");
return false;
}
if (document.getElementById("questiontwo").checked==false)
{
alert("Question two must be completed");
return false;
}
if (document.getElementById("questionthree").checked==false)
{
alert("Question three must be completed");
return false;
}
if (document.getElementById("questionfour").checked==false)
{
alert("Question four must be completed");
return false;
}
}

Example of the form's first question:

<tr>
<td class="question" colspan="4"><p class="question">Usain Bolt is the current world     record holder for the men's 100 meters, but what is his best time?</p></td>
</tr>

<tr>
<td class="answer">8.45 seconds<input type="radio" value="Aone" name="Qone"    id="questionone"></td>
<td class="answer">9.58 seconds<input type="radio" value="Atwo" name="Qone" id="questionone"></td>
<td class="answer">10.12 seconds<input type="radio" value="Athree" name="Qone" id="questionone"></td>
<td class="answer">9.32<input type="radio" value="Afour" name="Qone" id="question one">
   </td>
</tr>

*****UPDATE new code below:************

<link rel="stylesheet" href="style.css" type="text/css">
<!-- inclusion of fb config -->

<?php require_once('config.php'); ?>

<!-- client side validation for text fields -->

<script language="JavaScript" type="text/javascript">

function checkForm()
{
var x=document.forms["sdcomp"]["name"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
var x=document.forms["sdcomp"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Please enter a valid e-mail address");
return false;
}
/* HERE */
function isAnswered(name) {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    if ((input.name === name) && (input.checked)) {
        return true;
    }
}
return false;
}
if (!isAnswered("Qone")) {
alert("Question one must be completed");
return false;
}
if (!isAnswered("Qtwo")) {
alert("Question two must be completed");
return false;
}
if (!isAnswered("Qthree")) {
alert("Question three must be completed");
return false;
}
if (!isAnswered("Qfour")) {
alert("Question four must be completed");
return false;
}
}
</script>


<?php
$con = mysql_connect("localhost","root","root");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("sdfbcomp", $con);

// some code
?>

<?php 
$name = $_POST["name"];
$email = $_POST["email"];
$Qone = $_POST["Qone"];
$Qtwo = $_POST["Qtwo"];
$Qthree = $_POST["Qthree"];
$Qfour = $_POST["Qfour"];
?>
</head>
<body>
<div id="tablediv">
<table id="comptable">

<form name="sdcomp" method="post" action="insert.php" onSubmit="return checkForm();">



<tr class="userdetailfields">
<p>Name:</p><input type="text" size="12" maxlength="12" name="name"></br>
</tr>

<tr class="userdetailfields">
<p>Email:</p><input type="text" size="12" maxlength="30" name="email"></br>
</tr>

<tr>
<td class="question" colspan="4"><p class="question">Usain Bolt is the current world record holder for the men's 100 meters, but what is his best time?</p></td>
</tr>

<tr>
<td class="answer">8.45 seconds<input type="radio" value="Aone" name="Qone" id="questionone"></td>
<td class="answer">9.58 seconds<input type="radio" value="Atwo" name="Qone" id="questionone"></td>
<td class="answer">10.12 seconds<input type="radio" value="Athree" name="Qone" id="questionone"></td>
<td class="answer">9.32<input type="radio" value="Afour" name="Qone" id="question one">    </td>
</tr>

<tr>
<td class="question" colspan="4"><p class="question">Question two:</p></td>
</tr>

<tr>
<td class="answer">Answer one<input type="radio" value="Bone" name="Qtwo" id="questiontwo"></td>
<td class="answer">Answer two<input type="radio" value="Btwo" name="Qtwo" id="questiontwo"></td>
<td class="answer">Answer three<input type="radio" value="Bthree" name="Qtwo" id="questiontwo"></td>
<td class="answer">Answer four<input type="radio" value="Bfour" name="Qtwo" id="questiontwo"></td>
</tr>

<tr>
<td class="question" colspan="4"><p class="question">Question three:</td></p>
</tr>

<tr>
<td class="answer">Answer one<input type="radio" value="Cone" name="Qthree" id="questionthree"></td>
<td class="answer">Answer two<input type="radio" value="Ctwo" name="Qthree" id="questionthree"></td>
<td class="answer">Answer three<input type="radio" value="Cthree" name="Qthree" id="questionthree"></td>
<td class="answer">Answer four<input type="radio" value="Cfour" name="Qthree" id="questionthree"></td>
</tr>

<tr>
<td class="question" colspan="4"><p class="question">Question four:</td></p>
</tr>

<tr>
<td class="answer">Answer one<input type="radio" value="Done" name="Qfour" id="questionfour"></td>
<td class="answer">Answer two<input type="radio" value="Dtwo" name="Qfour" id="questionfour"></td>
<td class="answer">Answer three<input type="radio" value="Dthree" name="Qfour" id="questionfour"></td>
<td class="answer">Answer four<input type="radio" value="Dfour" name="Qfour" id="questionfour"></td>
</tr>

<tr><td><input type="submit" value="submit" name="submit" id="submit"><br /></td></tr>
</form><br />

</table>
</div>
</body>

Still have an issue with this, could you possibly help me? Thanks again!

possible duplicate of [How to get the selected radio button value using js](http://stackoverflow.com/questions/3869535/how-to-get-the-selected-radio-button-value-using-js) — Diodeus - James MacFarlane, Jun 20 '12 at 14:50
thanks, I've just removed it! But unfortunately to no avail. — Phil Hudson, Jun 20 '12 at 14:51
Hi, I'm afraid that hasn't helped either - the code is failing to validate now. Before it was saying that there was no value, even when there was. — Phil Hudson, Jun 20 '12 at 15:04
your javascript is trying to get value of objects with id's `"Qone"`, `"Qtwo"`, `"Qthree"`, `"Qfour"`. The cause of the problem may be that all the radio-buttons have the same name `Qone` — ClydeFrog, Jun 20 '12 at 15:09
please ignore my last comment, it is still saying that the radio hasn't been checked, even when it has. Thanks. — Phil Hudson, Jun 20 '12 at 15:09
I do have objects below with ids "Qone", "Qtwo", "Qthree", "Qfour" I just omitted them to reduce the size of the post. — Phil Hudson, Jun 20 '12 at 15:11
Yes each input has a unique name, and a set of values unique to that name. No ids have been specified. — Phil Hudson, Jun 20 '12 at 15:20
it looks like you have taken out the functions, return false looks like it need a function — david, Jun 20 '12 at 15:57
It's like it's not understanding the value from the radios - I'm not sure why? — Phil Hudson, Jun 20 '12 at 16:39
I've now attached IDs and used and if statement to determine whether or not the radio is checked - the script is now detecting properly, but after the alert and rechecking the radio it still repeats the same alert. Do I need to use some kind of loop? — Phil Hudson, Jun 20 '12 at 18:33
so your triggering this checkForm in the onSubmit attribute of the form tag? do I get it right? — Christopher Pelayo, Jun 21 '12 at 08:33

Jules · Accepted Answer · 2012-06-21T13:47:06.483

3

Firstly, in your question, all the answers have the same id='questionone'. You need to remove these ids.

To check if a particular name group is checked you can use:

function isAnswered(name) {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        if ((input.name === name) && (input.checked)) {
            return true;
        }
    }
    return false;
}

You can then test each question group with the following code:

if (!isAnswered("Qone")) {
    alert("Question one must be completed");
    return false;
}

edited Jun 21 '12 at 13:47

answered Jun 21 '12 at 08:33

Jules

4,319
3
44
72

Unfortunately this didn't work, and instead brought up an error saying that all fields were not completed. Thanks! – Phil Hudson Jun 21 '12 at 10:37
I've changed the code from input.checked === 'checked' to input.checked = true. It should work now. I tested in FF but I'll check in some other browsers. Do you use jQuery? – Jules Jun 21 '12 at 13:48
Actually, to be on the safe side, I've changed it again to just (input.checked). – Jules Jun 21 '12 at 13:51

ClydeFrog · Answer 2 · 2012-06-21T08:40:16.557

Can you show the whole form? In the meantime, try this:

function checkForm() {
    var x=document.forms["sdcomp"]["name"].value;

    if (x==null || x=="") {
        alert("Name must be filled out");
        return false;
    }

    var x=document.forms["sdcomp"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");

    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        alert("Please enter a valid e-mail address");
        return false;
    }

    if (document.getElementById("questionone").checked) {

        alert("Option one is selected");

    } else if (document.getElementById("questiontwo").checked) {

        alert("Option two is selected");

    } else if (document.getElementById("questionthree").checked) {

        alert("Option three is selected");

    } else if (document.getElementById("questionfour").checked) {

        alert("Option four is selected");

    } else {

        alert("No option is selected");

    }
}

And this is what i'm trying to tell you, put unique id's on your inputs to get their values in the function:

<tr>
    <td class="answer">
        <label>8.45 seconds</label>
        <input type="radio" value="Aone" name="Qone" id="questionone" />
    </td>
    <td class="answer">
        <label>9.58 seconds</label>
        <input type="radio" value="Atwo" name="Qtwo" id="questiontwo" />
    </td>
    <td class="answer">
        <label>10.12 seconds</label>
        <input type="radio" value="Athree" name="Qthree" id="questionthree" />
    </td>
    <td class="answer">
        <label>9.32 seconds</label>
        <input type="radio" value="Afour" name="Qfour" id="questionfour" />
    </td>
</tr>

Thanks @ClydeFrog. This is the code I'm using, and it works well apart from when option one ISNT selected. Then once it is reselected it is not recognised? I'm going to try putting in a second command to recheck it at the bottom of the script. — Phil Hudson, Jun 21 '12 at 10:35

Javascript form (with radio buttons) validation not working

2 Answers2