提交表单时未调用Javascript函数_Javascript_Jquery_Html_Ajax

提交表单时未调用Javascript函数

javascript jquery html ajax

提交表单时未调用Javascript函数,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我正在试用本教程：我正在这个沙箱上测试它：当我按下表单的submit按钮添加问题时，它什么也不做，甚至在Chrome中我的javascript控制台也没有输出我还在JavaScript中添加了一个警报语句，以查看是否正在调用它，但这也不起作用知道我做错了什么吗这是我的密码： <script type="text/javascript" > $(function() { $(".submit").click(function() { alert ("1"

我正在试用本教程：我正在这个沙箱上测试它：

当我按下表单的submit按钮添加问题时，它什么也不做，甚至在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>


$（函数（）
{
$（“.submit”）。单击（函数（）
{
警报（“1”）；
var name=$（“#name”）.val（）；
var username=$（“#username”）.val（）；
var password=$（“#password”）.val（）；
var性别=$（“#性别”）.val（）；
var dataString='name='+name+'&username='+username+'&password='+password+'&gender='+gender；
如果（姓名=“”| |用户名=“”| |密码=“”| |性别=“”）
{
$（'.success'）.fadeOut（200.hide（）；
$（'.error'）.fadeOut（200.show（）；
}
其他的
{
$.ajax({
类型：“POST”，
url:“join.php”，
数据：dataString，
成功：函数（）{
$（'.success'）.fadeIn（200.show（）；
$（'.error'）.fadeOut（200.hide（）；
}
});
}
返回false；
});
});

以及表格设置：

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

您需要在

表单

标签上添加一个

操作

属性，告诉表单提交到哪里

编辑

此外，jQuery没有启动，因为此选择器与您的提交按钮不匹配：

$（“.submit”）。请单击

。请尝试

$（“输入[type=submit]”）。单击
根据您指定的源代码示例，首先必须向表单添加操作
属性（即使是包含“#”）才能启用表单提交
其次，记住ajax方法url必须完整（例如：http://localhost/join.php
）
编辑：
我还准备了一个基于您发布的示例的新示例；它对我有用。请注意更改ajax方法目标url
<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>


$（函数（）{
$（“.submit”）。单击（函数（）{
var name=$（“#name”）.val（）；
var username=$（“#username”）.val（）；
var password=$（“#password”）.val（）；
var性别=$（“#性别”）.val（）；
var dataString='name='+name+'&username='+username+'&password='+password+'&gender='+gender；
如果（姓名=“”| |用户名=“”| |密码=“”| |性别=“”）
{
$（'.success'）.fadeOut（200.hide（）；
$（'.error'）.fadeOut（200.show（）；
}
其他的
{
$.ajax({
类型：“POST”，
url:“http://localhost/test/join.php",
数据：dataString，
成功：函数（）{
$（'.success'）.fadeIn（200.show（）；
$（'.error'）.fadeOut（200.hide（）；
}
});
}
返回false；
});
});




性别
男性的
女的

请输入有效数据
注册成功
请输入您编写的代码。没有人能想象代码没有看到它很好的一点，只是添加了codecan你可以发布表单的完整html吗？如果我提交到javascript，它应该是什么样子？动作是无关的，他是通过ajax提交的