Question

我有一项计算任务。

我做得最多我只是坚持这个任务：

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

Answer 1

您只需将单选按钮的值添加到消息中，如下所示：

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

Here is a fiddle demo you can try

编辑＃1：虽然据说使用了警告框，但这实际上不允许用户确认或拒绝，为此，您可以改为使用确认：

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。在return中的函数名称前面添加了onchange - 看起来不会在return false上提交。

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

-3。使用if (document.radioform.level.value == '')取消对所选值的稍微麻烦的检查。

-4。添加了确认检查。

编辑＃3：看起来firefox不喜欢document.ExamEntry.Level.value用于单选按钮，所以我创建了一个快速的解决方法，它将循环遍历{{1并找到一个“被选中”的（实际上是'检查' - 即使它是一个单选按钮，js代码仍被称为'已检查'）。

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

Answer 2

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

     alerttxt += value;

     alert(alerttxt);
}

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

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

2 个答案: