Функция для проверки нескольких возможных полей - PullRequest
Новая
       1

Функция для проверки нескольких возможных полей

0 голосов
/ 07 апреля 2011

Я делаю заявку на вопрос и ответ.

http://jsfiddle.net/kaninepete/4YTA6/

Как я могу расширить это, чтобы разрешить более одного вопроса одного типа?

Я не знаю, чтобы функция знала поле ведьмы для проверки.

Заранее спасибо.

Редактировать Я хочу проверить каждый ответ по отдельности. Требуется ли для каждого вопроса новая форма?

Ответы [ 2 ]

0 голосов
/ 07 апреля 2011

Технически это работает, но, вероятно, может потребоваться немало усилий - конструктивная критика приветствуется. (Сделайте HTML-файл действительно действительным, не связывайтесь напрямую с jQuery, очистите мой jQuery и т. Д. И т. Д. Я еще не эксперт по jQuery.) Я пошел по пути, где JavaScript просматривает весь соответствующий HTML-код и отображает ответы (вместо создания HTML на основе массивов JavaScript.)

Вы можете скопировать и вставить текст <li>...</li> и изменить число после q- и a- для каждого вопроса, и оно будет работать.

В идеале, мы будем использовать серверное программирование для проверки ответов (поскольку клиент может легко просмотреть ответы.) 

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js" ></script>
</head>
<body>
    <form name="myform" id="myform">
        <p>Make each of the following possessive by adding the appropriate apostrophe where needed. </p>
        <ol type="1">
            <li>boys: 
                <input type="text" name="q-1" /><!-- field for user input -->
                <input type="hidden" name="a-1" value="boy's" /><!-- answer -->
            </li>
            <li>girls: 
                <input type="text" name="q-2" />
                <input type="hidden" name="a-2" value="girl's" />
            </li>
        </ol>
        <p><input type="button" id="validate-btn" value="Check" /></p>
    </form>

    <script type="text/javascript">
        $('document').ready( function() {
            $('#validate-btn').click( function() {
                $(this).css('display','none');
                $('[name|="q"]').each( function() {
                    // find the associated answer
                    var pattern = /q\-([0-9]+)/;    // regular expression to pull question/answer number from field name
                    var result = pattern.exec($(this).attr('name'))[1]; // get the question/answer number
                    // you could probably just navigate around with DOM to get the next hidden text field instead, eh.
                    // get reference to the input with the answer
                    var answerbox = $('[name="a-'+result+'"]');
                    $(this).attr('disabled',true);
                    // verify answer, display replacement text
                    if($(this).val() == answerbox.val()) {
                        $(this).replaceWith('&nbsp; &nbsp;<strong>Correct!</strong>');
                    } else {
                        $(this).replaceWith('&nbsp; &nbsp;<strong>Incorrect! The answer was "'+ answerbox.val() +'"</strong>');
                    }
                });
            });
        });
    </script>
</body>

0 голосов
/ 07 апреля 2011

Да, вам потребуется новый элемент <input> для каждого вопроса, на который вы хотите, чтобы пользователь ответил.

...