PHP - javascript Validation - radio Buttons Alert

Question

i have three radio buttons input within a form. i want alert box appears when user click submit when one of the fields is null. how can i do that using javascript ?

my code so far is ..

  <?php

   session_start();
   $Load=$_SESSION['login_user'];
   include('../connect.php');


                if (isset($_POST['submit']))

{  

   $v1 = intval($_POST['v1']);
   $v2 = intval($_POST['v2']);
   $v3 = intval($_POST['v3']);
   $total = $v1 + $v2 + $v3  ;

 mysql_query("INSERT into Form1 (P1,P2,P3,TOTAL)
 values('$v1','$v2','$v3','$total')") or die(mysql_error());
 header("Location: mark.php");
 }


?>


<html>

<head>

<?php


if(!isset($_SESSION['login_user']))

header("Location:index.html");



?>
  <title>Q&A Form</title>

</head>

<body>


    <center><form method="post" action="mark.php"  >

    <table style="width: 20%" >
        <tr>
    <th> Criteria </th>
    <th> </th>
    </tr>
    <tr>
    <th> Excellent </th>
    <td >  4 </td>
    </tr>
    <tr>
    <th > Good <font size="3" > </font></th>
    <td>  3 <font size="4" > </font></td>
    </tr>
    <tr>
    <th > Average <font size="3" > </font></th>
    <td >  2 <font size="4" > </font></td>
    </tr>
    <tr>
    <th > Poor <font size="3" > </font></th>
    <td >  1 <font size="4" > </td>
    </tr>




<font size='4'>
    <table style="width: 70%">
        <tr>
<th > School Evaluation <font size="4" > </font></th>

<tr>
<th > Criteria <font size="4" > </font></th>
            <th> 4<font size="4" > </font></th>
            <th> 3<font size="4" > </font></th>
            <th> 2<font size="4" > </font></th>
            <th> 1<font size="4" > </font></th>

        </tr>
<tr>
<th> Your attendance<font size="4" > </font></th>
<td>  <input type="radio" name ="v1" value = "4"    onclick="updateTotal();"/></td>
<td>  <input type="radio" name ="v1" value = "3"    onclick="updateTotal();" /></td>
<td>  <input type="radio" name ="v1" value = "2"    onclick="updateTotal();" /></td>
<td>  <input type="radio" name ="v1" value = "1"    onclick="updateTotal();" /></td>    
</tr>

<tr>
<th > Your grades  <font size="4" > </font></th>
<td>  <input type="radio" name ="v2" value = "4"    onclick="updateTotal();" /></td>
<td>  <input type="radio" name ="v2" value = "3"    onclick="updateTotal();" /></td>
<td>  <input type="radio" name ="v2" value = "2"    onclick="updateTotal();" /></td>
<td>  <input type="radio" name ="v2" value = "1"    onclick="updateTotal();" /></td>    
</tr>

<tr>
<th >Your self-control <font size="4" > </font></th>
<td>  <input type="radio" name ="v3" value = "4"    onclick="updateTotal();" /></td>
<td>  <input type="radio" name ="v3" value = "3"    onclick="updateTotal();" /></td>
<td>  <input type="radio" name ="v3" value = "2"    onclick="updateTotal();" /></td>
<td>  <input type="radio" name ="v3" value = "1"    onclick="updateTotal();" /></td>    
</tr>       


        </tr>
    </table>


    <br>
    <td><input type="submit" name="submit" value="Submit">

    <input type="reset" name="clear" value="clear" style="width: 70px"></td>


 </form> 
</center>

i have the idea to put like

<form name="form1" action="mark.php" onsubmit="return validateForm()" method="post">

but what should i write in the validateForm() ?

First of all, it's 3 sets of radio buttons and not 3 radio buttons. Secondly by null do you mean at least one radio button should be clicked from each set? Finally, if you're open to jQuery, I can provide a solution. — asprin
– asprin, Commented Nov 14, 2012 at 11:22

topcat3 · Accepted Answer · 2012-11-14 11:23:05Z

1

This is very simple javascript validation. Sample taken from w3c below

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

answered Nov 14, 2012 at 11:23

topcat3

2,6706 gold badges36 silver badges58 bronze badges

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

Comments

jcalonso · Accepted Answer · 2012-11-14 11:28:50Z

0

Another option:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

    <script type="text/javascript">
function validateForm(formData){
    if(!this.v1.checked && !this.v2.checked && !this.v3.checked){
        alert('Chose an option please');
        return false;
    }
    }
    </script>

    <title></title>
</head>

<body>
    <form name="form1" action="mark.php" onsubmit="return validateForm()" method="post"> 
        <input type="radio" value="1" id="v1" name="v1"> <input type="radio" value="1" id="v2" name="v2"> <input type="radio" value="1" id="v3" name="v3"> <input type="submit" value="Send">
    </form>
</body>
</html>

answered Nov 14, 2012 at 11:28

jcalonso

1,51313 silver badges19 bronze badges

Comments

Sivagopal Manpragada · Accepted Answer · 2012-11-14 11:35:28Z

0

In your form page head section insert this code for your grades option check

    <script type="text/javascript">
 function validateform()
  {
    if(document.getElementsByName('v2').value="")
    {
      alert('Your grades is not selected');
    return false;
    }
  }
    </script>

in this way you can achieve for remaining radio buttons.

edited Nov 14, 2012 at 11:35

answered Nov 14, 2012 at 11:24

Sivagopal Manpragada

1,67414 silver badges34 bronze badges

Collectives™ on Stack Overflow

PHP - javascript Validation - radio Buttons Alert

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related