Question

此代码今天早些时候正在运行，然后随机停止，必须更改一些内容，但我无法解决问题 - 请参阅以下内容：

**更新 - 下面的代码更新。现在它可以正确识别是否选中了单选按钮，但是如果用户在显示警报后尝试重新提交表单，则识别的状态无法更新。是否需要某种循环？

  function checkForm()
{
var x=document.forms["sdcomp"]["name"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
var x=document.forms["sdcomp"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Please enter a valid e-mail address");
return false;
}
if (document.getElementById("questionone").checked==false)
{
alert("Question one must be completed");
return false;
}
if (document.getElementById("questiontwo").checked==false)
{
alert("Question two must be completed");
return false;
}
if (document.getElementById("questionthree").checked==false)
{
alert("Question three must be completed");
return false;
}
if (document.getElementById("questionfour").checked==false)
{
alert("Question four must be completed");
return false;
}
}

表单第一个问题的示例：

<tr>
<td class="question" colspan="4"><p class="question">Usain Bolt is the current world     record holder for the men's 100 meters, but what is his best time?</p></td>
</tr>

<tr>
<td class="answer">8.45 seconds<input type="radio" value="Aone" name="Qone"    id="questionone"></td>
<td class="answer">9.58 seconds<input type="radio" value="Atwo" name="Qone" id="questionone"></td>
<td class="answer">10.12 seconds<input type="radio" value="Athree" name="Qone" id="questionone"></td>
<td class="answer">9.32<input type="radio" value="Afour" name="Qone" id="question one">
   </td>
</tr>

** * ** 更新以下新代码： 的 ** * ** * ** * ** * 的

<link rel="stylesheet" href="style.css" type="text/css">
<!-- inclusion of fb config -->

<?php require_once('config.php'); ?>

<!-- client side validation for text fields -->

<script language="JavaScript" type="text/javascript">

function checkForm()
{
var x=document.forms["sdcomp"]["name"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
var x=document.forms["sdcomp"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Please enter a valid e-mail address");
return false;
}
/* HERE */
function isAnswered(name) {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    if ((input.name === name) && (input.checked)) {
        return true;
    }
}
return false;
}
if (!isAnswered("Qone")) {
alert("Question one must be completed");
return false;
}
if (!isAnswered("Qtwo")) {
alert("Question two must be completed");
return false;
}
if (!isAnswered("Qthree")) {
alert("Question three must be completed");
return false;
}
if (!isAnswered("Qfour")) {
alert("Question four must be completed");
return false;
}
}
</script>


<?php
$con = mysql_connect("localhost","root","root");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("sdfbcomp", $con);

// some code
?>

<?php 
$name = $_POST["name"];
$email = $_POST["email"];
$Qone = $_POST["Qone"];
$Qtwo = $_POST["Qtwo"];
$Qthree = $_POST["Qthree"];
$Qfour = $_POST["Qfour"];
?>
</head>
<body>
<div id="tablediv">
<table id="comptable">

<form name="sdcomp" method="post" action="insert.php" onSubmit="return checkForm();">



<tr class="userdetailfields">
<p>Name:</p><input type="text" size="12" maxlength="12" name="name"></br>
</tr>

<tr class="userdetailfields">
<p>Email:</p><input type="text" size="12" maxlength="30" name="email"></br>
</tr>

<tr>
<td class="question" colspan="4"><p class="question">Usain Bolt is the current world record holder for the men's 100 meters, but what is his best time?</p></td>
</tr>

<tr>
<td class="answer">8.45 seconds<input type="radio" value="Aone" name="Qone" id="questionone"></td>
<td class="answer">9.58 seconds<input type="radio" value="Atwo" name="Qone" id="questionone"></td>
<td class="answer">10.12 seconds<input type="radio" value="Athree" name="Qone" id="questionone"></td>
<td class="answer">9.32<input type="radio" value="Afour" name="Qone" id="question one">    </td>
</tr>

<tr>
<td class="question" colspan="4"><p class="question">Question two:</p></td>
</tr>

<tr>
<td class="answer">Answer one<input type="radio" value="Bone" name="Qtwo" id="questiontwo"></td>
<td class="answer">Answer two<input type="radio" value="Btwo" name="Qtwo" id="questiontwo"></td>
<td class="answer">Answer three<input type="radio" value="Bthree" name="Qtwo" id="questiontwo"></td>
<td class="answer">Answer four<input type="radio" value="Bfour" name="Qtwo" id="questiontwo"></td>
</tr>

<tr>
<td class="question" colspan="4"><p class="question">Question three:</td></p>
</tr>

<tr>
<td class="answer">Answer one<input type="radio" value="Cone" name="Qthree" id="questionthree"></td>
<td class="answer">Answer two<input type="radio" value="Ctwo" name="Qthree" id="questionthree"></td>
<td class="answer">Answer three<input type="radio" value="Cthree" name="Qthree" id="questionthree"></td>
<td class="answer">Answer four<input type="radio" value="Cfour" name="Qthree" id="questionthree"></td>
</tr>

<tr>
<td class="question" colspan="4"><p class="question">Question four:</td></p>
</tr>

<tr>
<td class="answer">Answer one<input type="radio" value="Done" name="Qfour" id="questionfour"></td>
<td class="answer">Answer two<input type="radio" value="Dtwo" name="Qfour" id="questionfour"></td>
<td class="answer">Answer three<input type="radio" value="Dthree" name="Qfour" id="questionfour"></td>
<td class="answer">Answer four<input type="radio" value="Dfour" name="Qfour" id="questionfour"></td>
</tr>

<tr><td><input type="submit" value="submit" name="submit" id="submit"><br /></td></tr>
</form><br />

</table>
</div>
</body>

还有这个问题，你能帮助我吗？再次感谢！

Answer 1

首先，在您的问题中，所有答案都具有相同的id ='questionone'。您需要删除这些ID。

要检查是否选中了特定的名称组，您可以使用：

function isAnswered(name) {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        if ((input.name === name) && (input.checked)) {
            return true;
        }
    }
    return false;
}

然后，您可以使用以下代码测试每个问题组：

if (!isAnswered("Qone")) {
    alert("Question one must be completed");
    return false;
}

Answer 2

你能展示整个表格吗？在此期间，试试这个：

function checkForm() {
    var x=document.forms["sdcomp"]["name"].value;

    if (x==null || x=="") {
        alert("Name must be filled out");
        return false;
    }

    var x=document.forms["sdcomp"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");

    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        alert("Please enter a valid e-mail address");
        return false;
    }

    if (document.getElementById("questionone").checked) {

        alert("Option one is selected");

    } else if (document.getElementById("questiontwo").checked) {

        alert("Option two is selected");

    } else if (document.getElementById("questionthree").checked) {

        alert("Option three is selected");

    } else if (document.getElementById("questionfour").checked) {

        alert("Option four is selected");

    } else {

        alert("No option is selected");

    }
}

这就是我试图告诉你的内容，在你的输入上输入唯一的id以获得他们在函数中的值：

<tr>
    <td class="answer">
        <label>8.45 seconds</label>
        <input type="radio" value="Aone" name="Qone" id="questionone" />
    </td>
    <td class="answer">
        <label>9.58 seconds</label>
        <input type="radio" value="Atwo" name="Qtwo" id="questiontwo" />
    </td>
    <td class="answer">
        <label>10.12 seconds</label>
        <input type="radio" value="Athree" name="Qthree" id="questionthree" />
    </td>
    <td class="answer">
        <label>9.32 seconds</label>
        <input type="radio" value="Afour" name="Qfour" id="questionfour" />
    </td>
</tr>

Javascript表单（带单选按钮）验证无效

2 个答案: