Javascript function not being called when submitting a form
I am开发者_JAVA百科 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
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.
I also added an alert statement in the JavaScript to see if it is being called, but that also isn't working.
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">
You need an action
attribute on your form
tag to tell the form where to submit to.
EDIT
Also, the jQuery is not firing because this selector doesn't match your submit button: $(".submit").click
. Try $("input[type=submit]").click
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.
Second, remember the ajax method url must be complete (e.g.: 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.
<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>
精彩评论