Получение результата перед отправкой

0

Как я могу получить результат формы перед подачей? у меня есть

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
    <body>
        <div class="form">
            <form name="form">
                <input type="text" />
                <br />
                <input type="text" />
            </form>
        </div>
        <p class="congrats"></p>
        <input style="width:100px" value="check" id="a" type="button" />
        <script>
            //Get amount of empty inputs
            $("#a").onload('click', function () {
                var bad = 0;
                $('.form :text').each(function () {
                    if ($.trim($(this).val()) == "")
                        bad++;
                });
                if (bad > 0)
                    $('.congrats').css("display", "block").text(bad + ' missing');
                else
                    $('.congrats').hide();
                //Get total inputs
                console.log("Total inputs " + form.getElementsByTagName('input').length);
                //Divide by complete inputs out of 100%
                console.log("The percentage is " + 100 / form.getElementsByTagName('input').length + "%");
                //Minus total inputs
                console.log(form.getElementsByTagName('input').length - bad);
            });
        </script>
    </body>
</html>

Но как я могу получить результат до фактического щелчка, а не pageload? В процессе?

  • 0
    если вы не загружаете значения из базы данных в форму, все они будут "" загружены или готовы. вы, вероятно, захотите обработать его одним щелчком мыши, но при этом не допустите поведение по умолчанию, если найдете плохие результаты.
  • 0
    что такое #a? Дайте нам больше информации
Показать ещё 6 комментариев
Теги:

3 ответа

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

Принимая код, который вы указали в обновленном jsbin, вам просто нужно явно вызвать countMissing():

countMissing();

//Get amount of empty inputs
function countMissing() {
    var bad = 0;
    $('.form :text').each(function () {
        if ($.trim($(this).val()) == "") bad++;


    });

    if (bad > 0) $('.congrats').css("display", "block").text(bad + ' missing');
    else $('.congrats').hide();
    //Get total inputs
    console.log("Total inputs "+form.getElementsByTagName('input').length);
    //Divide by complete inputs out of 100%

    console.log("The percentage is " + 100/form.getElementsByTagName('input').length+"%");


    //Minus total inputs
    console.log(form.getElementsByTagName('input').length - bad);
}

DEMO

  • 0
    Это работает хорошо, но теперь, когда я отправляю, как я получу количество выполненных входов? Или это будет другой пост?
  • 0
    Да. Задайте это в новом вопросе.
0

Вы используете .onload вместо .on(): http://jsfiddle.net/2Bt88/1/

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

$("#a").on("click", function(e) {
    // Prevent default behaviour
    e.preventDefault();

    // Do stuff

    // Submit the form
    e.submit();
});

DEMO

  • 1
    if (bad === 0) e.submit (); иначе это именно то, что я хотел написать :)
  • 0
    Хм, это не работает по какой-то причине. Я не получаю сообщение в консоли, прежде чем отправить ....
Показать ещё 12 комментариев
0

Добавьте это в свой код

if (form.getElementsByTagName('input').length - bad === 0) 
        return false;

http://jsfiddle.net/Tze9M/

Ещё вопросы

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