Как проверить радиокнопки с помощью функции JavaScript?

0

У меня есть компьютерное назначение.

Я сделал большинство, я просто застрял в этой задаче:

"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>
Теги:
function

2 ответа

1
Лучший ответ

Все, что вам нужно сделать, это добавить значение переключателя в сообщение следующим образом:

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

Вот скрипичная демонстрация, которую вы можете попробовать

РЕДАКТИРОВАТЬ № 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/

EDIT # 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. Добавлена проверка подтверждения.

EDIT # 3: похоже, что firefox не любит использование document.ExamEntry.Level.value для радиокнопок, поэтому вместо этого я создал быстрое обходное решение, которое будет проходить через элементы document.ExamEntry.Level и найти тот, который "selected" ("проверено" на самом деле - даже если это переключатель, код js по-прежнему называется "checked").

Посмотрите обновленную скрипту: http://jsfiddle.net/Qd8sk/3/

Поделиться
  • 0
    Насчёт уровня можно подтвердить или отклонить. ?
  • 0
    они сказали, что это должно быть окно с предупреждением, а не подтверждение, вы все равно можете принять или отклонить, нажав кнопку ОК, вернувшись назад и сделав правильный выбор.
Показать ещё 37 комментариев
0 
function confirm () {
     var alerttxt = "Are you sure you want to choose",
         value = document.ExamEntry.name.value;

     alerttxt += value;

     alert(alerttxt);
}

Переменная value содержит значение, которое пользователь выбрал в переключателе, вы просто хотите добавить это к сообщению, которое вы составляете, и отобразить весь этот текст в предупреждении

Поделиться
  • 0
    Насчёт уровня можно подтвердить или отклонить. ?
  • 0
    почему вы используете другой код, чем тот, который уже был предоставлен ОП?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню