Question

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

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">

Answer 1

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