Javascript function not being called when submitting a form_问答_开发者

Javascript function not being called when submitting a form

开发者 https://www.devze.com 2023-04-08 12:14 出处：网络

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>