How to use Javascript to validate dynamically generated PHP form?

Question

I've created a form using PHP in which the user has to click on a radio button before clicking on the button to submit the form. It looks as follows:

<form name="films" action="showing.php" method="post">
<table id="filmtable">
<tr><th>Title</th><th>Length</th><th>Description</th><th>Poster</th><th>Required</th></tr>
<?php
//Loop through every row returned by $result query to display it in table.
while ($newArray = mysql_fetch_array($result)){

    $title  = $newArray['title'];
    $length = $newArray['length'];
    $description = $newArray['description'];
    $image = $newArray['image'];

    //Echo statements will display query results on screen.

    echo "<tr><td>$title</td><td>$length</td><td>$description</td>";
    echo "<td><image src=\"$image\"</td>";
    echo "<td><input type=\"radio\" id='wanted' name=\"wanted[]\" value='$title'></td></tr>";

}
// if (! array_key_exists($_POST['wanted[0]'], $result)){
//  echo "Select it.";
//}


?>
</table>
<input type="submit" onsubmit = 'return validate()' value="Select Film">
</form>

As a validation measure I created the following in Javascript with the aim of preventing the user from submitting the form if they have not selected a radio button:

<script>
function validate(){
    var radio = document.getElementById('wanted').checked;

    if(radio=="")
    {
        alert("Please select a film to continue making a booking.");
        return false;
    }
    return true;

}

</script>

The script prevents the user from submitting the form if no selection has been made from the radio boxes as intended. However, it will only allow the form to be submitted if the first radio box is selected. Selecting any button other than this one will cause the submit attempt to fail. What changes should I make to the JS to rectify this situation?

Do not use the same ID for all the radio buttons, ID's should be unique. Create a class instead, hint: when using the class you will need to put all elements in an array — Adam Buchanan Smith
– Adam Buchanan Smith, Commented May 24, 2016 at 23:31

Louys Patrice Bessette · Accepted Answer · 2016-05-25 01:38:27Z

1

This PHP fetch loop attributes multiple times the same id="wanted" to many radio buttons.
An Id should be unique.... So it's a bad practice.

Remove the id and add a class instead:

echo "<td><input type=\"radio\" class=\"wanted[]\" name=\"wanted[]\" value='$title'></td></tr>";

Then, the use of jQuery saves pain...

Within your submit script:

if(!$('.wanted').prop("checked")){
    alert("Please select a film to continue making a booking.");
    return;
}

Add this jQuery lib call in your head:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

EDIT - See comments
Function validate should be this:

function validate(){
    var wantedChecked=$(".wanted:checked");
    if (!wantedChecked.prop("checked")){
        console.log("false");
        return false;

    }else{
        console.log("true");
        return true;
    }
}

edited May 25, 2016 at 1:38

answered May 24, 2016 at 23:46

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

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

10 Comments

Madrigone Over a year ago

This isn't working either. Nothing happens, the form just submits.

Louys Patrice Bessette Over a year ago

Sorry... I just noticed the missing double quotes... within prop(). See edit

Madrigone Over a year ago

Now the alert just opens when the page loads. Once clicked away the form can be submitted without any input.

Louys Patrice Bessette Over a year ago

Hew.... Place that if statement within your submit script. For sure, if it executes onload, the alert will show.

Louys Patrice Bessette Over a year ago

Added a return, just in case your script would go on after the alert.

|

Rob M. · Accepted Answer · 2016-05-24 23:31:14Z

0

getElementById returns the first element matching the selector. If you just want to verify that any of them were checked, you could do something like:

var anyChecked = document.querySelectorAll('[name=wanted]:checked').length > 0;

answered May 24, 2016 at 23:31

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

2 Comments

Madrigone Over a year ago

Tried your code and it doesn't work. Where should I place this in the JS script?

Rob M. Over a year ago

It works fine for me: jsfiddle.net/76cz8udk/2. You should just need to replace your var radio = document.getElementById('wanted').checked; with what I posted, and change your condition from if(radio=="") to if(!anyChecked)

Collectives™ on Stack Overflow

How to use Javascript to validate dynamically generated PHP form?

2 Answers 2

10 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related