Question

我无法正确执行此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>

Answer 1

使用event.preventdefault停止提交页面

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

Answer 2

您的问题是使用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>

Answer 3

试试这个：

<script type="text/javascript">

$（document）.ready（function（）{

$（ “提交”）。点击（函数（）{ 警报（“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;
});

}）;

Answer 4

首先，感谢大家的帮助。

最后，主要问题来自代码的其他部分。在使用“join.php”进行mysql插入后，我正在使用pjax（https://github.com/thybag/PJAX-Standalone）将表单替换为其他html文档（在本例中为page1.html）。而且我没有正确调用jquery函数。

说明：从page1.html开始，然后点击“Go To Page 2”（这将div“content”替换为page2.html的主体）。然后填写表格并提交。当你点击提交时，激活jquery函数（join.php mysql insert inside），最后再替换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>

jQuery函数问题

4 个答案: