如何使用javascript函数验证单选按钮

How do I validate radiobuttons using a javascript function?

本文关键字：验证 单选按钮 函数 javascript 何使用      更新时间：2023-09-26

我有一项计算任务要做。

我已经完成了大部分工作，我只是被困在这个任务上：

"Add a set of radio buttons to the form to accept a level of entry such as
 GCSE, AS or A2. Write a function that displays the level of entry to the user
 in an alert box so that the level can be confirmed or rejected."

我已经完成了单选按钮，我只是不知道如何使用Alertbox和功能完成第二部分。

到目前为止，我的代码如下：

<html>
    <head>
        <title>Exam entry</title>
        <script language="javascript" type="text/javascript">
            function validateForm() {
                var result = true;
                var msg="";
                if (document.ExamEntry.name.value == "") {
                    msg += "You must enter your name 'n";
                    document.ExamEntry.name.focus();
                    document.getElementById('name').style.color="red";
                    result = false;
                }
                if (document.ExamEntry.subject.value == "") {
                    msg += "You must enter the subject 'n";
                    document.ExamEntry.subject.focus();
                    document.getElementById('subject').style.color = "red";
                    result = false;
                }
                if (document.ExamEntry.examno.value == "") {
                    msg += "You must enter your Examination Number 'n";
                    document.ExamEntry.examno.focus();
                    document.getElementById('examinationno').style.color = "red";
                    result = false;
                }
                if (msg=="") {
                    return result;
                }
                {
                    alert(msg)
                    return result;
                }
            }
        </script>
    </head> 
    <! Main HTML content begins >
    <body>
        <h1>Exam Entry Form</h1>
        <form name="ExamEntry" method="post" action="success.html">
            <table width="50%" border="0">
                <tr></tr>
                <tr>
                    <td id="name">Name</td>
                    <td><input type="text" name="name" /></td>
                </tr>
                <tr>
                    <td id="subject">Subject</td>
                    <td><input type="text" name="subject" /></td>
                </tr>
                <tr>
                    <td id="examinationno">Examination Number</td>
                    <td><input type="text" name="examno" maxlength="4" /></td>
                </tr>
                <tr>    
                    <td><input type="radio" name="Level" value="GCSE">GCSE</td>
                </tr>
                <tr>
                    <td><input type="radio" name="Level" value="AS">AS</td>
                </tr>
                <tr>
                    <td><input type="radio" name="Level" value="A2">A2</td>
                </tr>
                <tr>
                    <td><input type="submit" name="Submit" value="Submit" onClick="return validateForm();" /></td>
                    <td><input type="reset" name="Reset" value="Reset" /></td>
                </tr>
            </table>
        </form>
    </body>
</html>

您所要做的就是将单选按钮的值添加到消息中，如下所示：

msg += "Level of Entry: "+document.ExamEntry.Level.value;

这里有一个小提琴演示，你可以试试

编辑#1:虽然据说使用警报框，但实际上不允许用户确认或拒绝，为此，您可以使用confirm：

if (confirm("Click OK to confirm your Level of Entry or Cancel if you would like to correct it"))
    return true;
else
    return false;

在我的示例中，我只在表单验证的其余部分成功的情况下添加它：http://jsfiddle.net/Qd8sk/2/

编辑#2：在我们的对话之后，我更新了您创建的jsfiddle。它比您提供的要简单得多。

这是你的：http://jsfiddle.net/Kjxmn/

这是我的：http://jsfiddle.net/Kjxmn/2/

我改变了几件事：

-1.在onchange中的函数名前面添加了return，否则即使在return false上也会提交。

-2.更正了您这次调用的表单名称radioform，而不是Exam Entry。

-3.取消了使用if (document.radioform.level.value == '')对所选值进行略显繁琐的检查。

-4.添加了确认检查。

EDIT#3：看起来firefox不喜欢在单选按钮中使用document.ExamEntry.Level.value，所以我创建了一个快速的解决方法，该方法将遍历document.ExamEntry.Level的元素，并找到"选中"的元素（实际上是"选中"-即使它是一个单选按钮，js代码仍被称为"选中"）。

看看更新后的小提琴：http://jsfiddle.net/Qd8sk/3/

function confirm () {
     var alerttxt = "Are you sure you want to choose",
         value = document.ExamEntry.name.value;
     alerttxt += value;
     alert(alerttxt);
}

value变量保存用户在单选按钮中选择的值，您只想将其附加到您编写的消息中，并在警报中显示整个txt

相关文章：