0

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">
3
  • 5
    please put the code written by you. no one can imagine the code without seeing it Sep 23, 2011 at 15:22
  • Good point, just added the code
    – Genadinik
    Sep 23, 2011 at 15:26
  • can you post the full html of the form?
    – Einacio
    Sep 23, 2011 at 15:29

2 Answers 2

0

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

2
  • 1
    How should it look like if I am submitting to the javascript?
    – Genadinik
    Sep 23, 2011 at 15:25
  • the action is irrelevant, he is doing th submit thru ajax
    – Einacio
    Sep 23, 2011 at 15:28
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.