2012-11-14 75 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>