Проблемы с функцией jQuery

Question

Проблемы с функцией jQuery

0

Я не могу выполнить эту функцию jquery должным образом. Когда я нажимаю кнопку "Отправить форму", отображаются только два первых предупреждения, а затем перезагрузка страницы. Поэтому я снова нажимаю кнопку отправки формы с перезагруженной страницей, а затем показывает остальные предупреждения (начиная с третьего), а затем функция работает нормально.

В заключение: мне нужно нажать кнопку "Отправить два раза вместо одного", чтобы выполнить функцию.

Есть идеи? Спасибо.

Код JS:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript">
alert("enters script");

$(function () {
    alert("enters jquery function");

    $(".submit").click(function () {
        alert("enters click submit function");

        var name = $("#name").val();
        var date = $("#date").val();
        var dataString = 'name=' + name + '&date=' + date;
        alert("saved variables");

        if (name == '' || date == '') {
            alert("enters if");

            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        } else {
            alert("enters else");

            $.ajax({
                type: "POST",
                url: "join.php",
                data: dataString,
                success: function () {
                    alert("enters success");

                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                    refresh();
                }
            });
        }
        return false;
    });
});
</script>

Код HTML:

<form method="post" name="form">

    <ul>
        <li>
        Name <input id="name" name="name" type="text" />
        </li>

        <li>
        Date <input id="date" name="date" type="date" />
        </li>
    </ul>

    <div >
        <input type="submit" value="Submit" class="submit"/>
        <span class="error" style="display:none"> Please Enter Valid Data</span>
        <span class="success" style="display:none"> Registration Successfully</span>
    </div>

</form>

pesk1 14 фев. 2014, в 18:50

Источник

0

проверьте, есть ли какая-либо ошибка в вашей консоли, пожалуйста
Alessandro Minoccheri 14 фев. 2014, в 17:02
1

Скрипка была бы полезна как всегда ...
kn0x 14 фев. 2014, в 17:03
1

у меня нормально работает jsfiddle.net/7Ta8t
Alessandro Minoccheri 14 фев. 2014, в 17:04
0

Вы пробовали разные браузеры?
Tim 14 фев. 2014, в 17:04
1

Вы пытались нажать очень сильно?
reergymerej 14 фев. 2014, в 17:05

Показать ещё 3 комментария

Теги:

php

javascript

jquery

html

forms

4 ответа

0

используйте event.preventdefault, чтобы остановить отправку страницы

http://api.jquery.com/event.preventdefault/

Paulo Lima 14 фев. 2014, в 15:47

1

возвращение ложного делает то же самое
Arun P Johny 14 фев. 2014, в 17:06
0

В дополнение к тому, что сказал Арун П. Джонни, описанная ОП проблема заключается не в том, что страница отправляется, он должен дважды нажать кнопку отправки.
11684 14 фев. 2014, в 17:17

0

Попробуй это:

<script type="text/javascript">

$ (document).ready(function() {

$ (". submit"). click (function() {alert ("entra en la funcion del clic del submit");

    var nombre = $("#nombre").val();
    var fecha = $("#fecha").val();
    var dataString = 'nombre='+ nombre + '&fecha=' + fecha;
    alert("variables guardadas");

    if(nombre=='' || fecha=='')
    {
    alert("entra en el if");

        $('.success').fadeOut(200).hide();
        $('.error').fadeOut(200).show();
    }
    else
    {
    alert("entra en el else");

        $.ajax({
            type: "POST",
            url: "join.php",
            data: dataString,
            success: function()
            {

            alert("entra en el success");

                $('.success').fadeIn(200).show();
                $('.error').fadeOut(200).hide();
                refresca();
            }

            });
    }
    return false;
});

    var nombre = $("#nombre").val();
    var fecha = $("#fecha").val();
    var dataString = 'nombre='+ nombre + '&fecha=' + fecha;
    alert("variables guardadas");

    if(nombre=='' || fecha=='')
    {
    alert("entra en el if");

        $('.success').fadeOut(200).hide();
        $('.error').fadeOut(200).show();
    }
    else
    {
    alert("entra en el else");

        $.ajax({
            type: "POST",
            url: "join.php",
            data: dataString,
            success: function()
            {

            alert("entra en el success");

                $('.success').fadeIn(200).show();
                $('.error').fadeOut(200).hide();
                refresca();
            }

            });
    }
    return false;
});

}); });

MarianoDav 14 фев. 2014, в 15:22

0

Ваша проблема заключается в использовании кнопок submit, у них есть поведение по умолчанию, отличное от того, что вы добавляете в качестве события к нему.

заменил это:

<input type="submit" value="Submit" class="submit" />

с:

<input type="button" value="Submit" class="submit" />

это вы работаете DEMO

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

<form method="post" name="form" onsubmit="return false;">
    <!--your stuff-->
</form>

Mehran Hatami 14 фев. 2014, в 14:55

1

снова действие по умолчанию нажатия кнопки предотвращается, так как это может помочь
Arun P Johny 14 фев. 2014, в 17:07
0

@ArunPJohny: на самом деле действие submit по умолчанию запрещено, а не button кнопки. но дело в том, что если вы не запретите отправку, это отправит все содержимое формы на сервер, и ваша страница перезагрузится.
Mehran Hatami 14 фев. 2014, в 17:48

Ещё вопросы

проверьте, есть ли какая-либо ошибка в вашей консоли, пожалуйста
Скрипка была бы полезна как всегда ...
у меня нормально работает jsfiddle.net/7Ta8t
Вы пытались нажать очень сильно?
возвращение ложного делает то же самое
В дополнение к тому, что сказал Арун П. Джонни, описанная ОП проблема заключается не в том, что страница отправляется, он должен дважды нажать кнопку отправки.
снова действие по умолчанию нажатия кнопки предотвращается, так как это может помочь
@ArunPJohny: на самом деле действие submit по умолчанию запрещено, а не button кнопки. но дело в том, что если вы не запретите отправку, это отправит все содержимое формы на сервер, и ваша страница перезагрузится.

pesk1 · Accepted Answer · 2014-02-17T18-59-00.000Z

Прежде всего, спасибо всем за вашу помощь.

Наконец, основная проблема исходит из другой части кода. Я использовал pjax (https://github.com/thybag/PJAX-Standalone), чтобы заменить форму другим html-документом (в данном случае page1.html) после выполнения вставки mysql через "join.php". И я не называю функцию jquery должным образом.

Объяснение: Вы начинаете в page1.html, затем нажимаете "Перейти на страницу 2" (это заменит div "content" телом страницы2.html). Затем заполните форму и отправьте ее. Когда вы нажимаете "Отправить", активируется функция jquery (join.php mysql insert внутри) и, наконец, снова заменяется div "content".

Решение (это работает):

page1.html

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="pjax-standalone.js"></script>

<script type="text/javascript">
    pjax.connect({
            'container': 'content',
            'beforeSend': function(){console.log("before send");},
            'complete': function(){console.log("done!");

                if($("#button_pg_2").length) 
                {
                    $( document ).ready(function() 
                    {
                        $(".submit").click(function() 
                        {
                            var nombre = $("#name").val();
                            var fecha = $("#date").val();
                            var dataString = 'name='+ name + '&date=' + date;

                            if(name=='' || date=='')
                            {
                                $('.success').fadeOut(200).hide();
                                $('.error').fadeOut(200).show();
                            }
                            else
                            {
                                $.ajax(
                                {
                                    type: "POST",
                                    url: "join.php",
                                    data: dataString,
                                    success: function()
                                    {
                                        $('.success').fadeIn(200).show();
                                        $('.error').fadeOut(200).hide();
                                        replace();
                                    }
                                });
                            }
                            return false;
                        });
                    });

                }
        }
    });
</script>

<script type="text/javascript">
    function replace()
    {
    pjax.invoke('page1.html', 'content');
    }
</script>
</head>

<body>
    <div id="header">
    This div never changes
    </div>
    <div id="content">
        <a href="page2.html" data-pjax="content">Go To Page 2</a>
    </div>
</body>
</html>

page2.html

<html>
<body>
    <form method="post" name="form">

        <ul>
            <li>
            Name <input id="name" name="name" type="text" />
            </li>

            <li>
            Date <input id="date" name="date" type="date" />
            </li>
        </ul>

        <div >
            <input type="button" id="button_pg_2" value="submit" class="submit"/>
            <span class="error" style="display:none"> Please Enter Valid Data</span>
            <span class="success" style="display:none"> Registration Successfully</span>
        </div>

    </form>
</body>
</html>