提交表单时未调用Javascript函数
[英]Javascript function not being called when submitting a form
问题描述
I am trying out this tutorial: http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html and I am testing it on this sandbox here: http://www.problemio.com 
我尝试了本教程： http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html ，我在这里对这个沙盒测试它： HTTP：//www.problemio。 com
When I press the submit button of the form to add a problem, it doesn't do anything, and even there is no output to my javascript console in Chrome. 当我按下表单的提交按钮以添加问题时，它什么也没有做，甚至没有输出到Chrome中的JavaScript控制台。
I also added an alert statement in the JavaScript to see if it is being called, but that also isn't working. 我还在JavaScript中添加了一个警报语句，以查看它是否正在被调用，但这也无法正常工作。
Any idea what I am doing wrong? 知道我在做什么错吗？
Here is my code: 这是我的代码：
<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>
and the form setup: 和表单设置：
<form name="form" method="post">
2 个解决方案
解决方案1
0 已采纳 2011-09-23 15:23:51
You need an action attribute on your form tag to tell the form where to submit to. 您需要在form标签上指定一个action属性，以告知表单要提交到的位置。
EDIT 编辑
Also, the jQuery is not firing because this selector doesn't match your submit button: $(".submit").click . 另外，jQuery也不会触发，因为此选择器与您的提交按钮不匹配： $(".submit").click 。 Try $("input[type=submit]").click 尝试$("input[type=submit]").click
解决方案2
0 2011-09-23 15:38:15
Basing on the source code sample you indicated, first you must add an action attribute (even a fake one containing "#") to the form to enable form submission. 根据您指示的源代码示例，首先必须向表单添加一个action属性（甚至是包含“＃”的伪造属性）以启用表单提交。
Second, remember the ajax method url must be complete (eg: http://localhost/join.php ). 其次，记住ajax方法的URL必须完整（例如： http://localhost/join.php ）。
Edit: I also prepared a new example based on the one you posted; 编辑：我还根据您发布的示例准备了一个新示例； it is working for me. 它为我工作。 Please take care of changing the ajax method destination url. 请注意更改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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.