2012-11-14 38 views
0

我有三个单选按钮输入一个表单。当用户单击提交时,其中一个字段为空时,我想要警告框出现。我怎么能使用JavaScript?PHP的 - javascript验证 - 单选按钮警报

到目前为止我的代码是...

<?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> 

我有主意,把像

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

但我应该在validateForm写()?

+0

首先,它是3套单选按钮,而不是3个单选按钮。其次,'null'是否意味着每个集合至少应该单击一个单选按钮?最后,如果你对jQuery开放,我可以提供一个解决方案。 – asprin

回答

1

这是非常简单的javascript验证。从W3C下面

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

采取样品中窗体页头部分插入此代码以这种方式可以实现剩余单选按钮你的成绩选项检查

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

0

另一种选择:

所有的
<!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>