Question

我正在尝试本教程：http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html我正在此沙箱上对其进行测试：http://www.problemio.com

当我按表单的提交按钮添加问题时，它什么也没做，甚至Chrome中的javascript控制台也没有输出。

我还在JavaScript中添加了一个警告语句，以查看是否正在调用它，但这也无效。

知道我做错了吗？

这是我的代码：

<script type="text/javascript" >
$(function()
{
    $(".submit").click(function()
    {
    alert ("1");
        var name = $("#name").val();
        var username = $("#username").val();
        var password = $("#password").val();
        var gender = $("#gender").val();
        var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;

if(name=='' || username=='' || password=='' || gender=='')
{
$('.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();
}
});
}
return false;
});
});
</script>

和表单设置：

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

Answer 1

您需要action标记上的form属性来告知表单提交的位置。

修改

此外，jQuery没有触发，因为此选择器与您的提交按钮不匹配：$(".submit").click。试试$("input[type=submit]").click

Answer 2

根据您指明的源代码示例，首先您必须向表单添加action属性（甚至是包含“＃”的虚假属性）以启用表单提交。

其次，请记住ajax方法url必须完整（例如：http://localhost/join.php）。

编辑：我还根据你发布的那个准备了一个新的例子;它对我有用。请注意更改ajax方法目标网址。

<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" >
            $(function() {
            $(".submit").click(function() {
                var name = $("#name").val();
                var username = $("#username").val();
                var password = $("#password").val();
                var gender = $("#gender").val();
                var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;

                if(name=='' || username=='' || password=='' || gender=='')
                {
                    $('.success').fadeOut(200).hide();
                    $('.error').fadeOut(200).show();
                }
                else
                {
                    $.ajax({
                        type: "POST",
                        url: "http://localhost/test/join.php",
                        data: dataString,
                        success: function(){
                            $('.success').fadeIn(200).show();
                            $('.error').fadeOut(200).hide();
                        }
                    });
                }
                return false;
            });
        });
        </script>
    </head>
    <body>
        <form method="post" name="form" action="#">
        <ul><li>
        <input id="name" name="name" type="text" />
        </li><li>
        <input id="username" name="username" type="text" />
        </li><li>
        <input id="password" name="password" type="password" />
        </li><li>
        <select id="gender" name="gender"> 
        <option value="">Gender</option>
        <option value="1">Male</option>
        <option value="2">Female</option>
        </select>
        </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>
    </body>
</html>

提交表单时未调用Javascript函数

2 个答案: