Question

我在表单中输入了三个单选按钮。当其中一个字段为空时，当用户单击“提交”时，我希望显示警告框。我怎么能用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（）中写什么？

Answer 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;
  }
}

Answer 2

在表单页面部分插入此代码以进行成绩选项检查

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

通过这种方式，您可以实现剩余的单选按钮。

Answer 3

另一种选择：

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

PHP - javascript验证 - 收音机按钮警报

3 个答案: