jQuery无法重新识别表单和页面刷新

Question

I have a form that needs to be submitted and the data sent to mysql with Ajax and jQuery, however when clicking submit, the page refreshes and the jQuery code is not running.

Here is my HTML code:

<form class="form-horizontal" role="form" action="" method="post">
        <input type="text" id="firstname" class="form-control" placeholder="Firstname" required=""></br>
        <input type="text" id="lastname" class="form-control" placeholder="Lastname" required=""></br>
        <input type="text" id="signup_email" class="form-control" placeholder="Email address" required=""></br>
        <select id="gender" class="form-control">
            <option>Select Gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select></br>
        <input type="password" id="signup_password" class="form-control" placeholder="Password" required="">
        <input type="submit" id="signup_button" name="signup_button" class="btn btn-primary" value="Sign up">
    </form>

And here is my jQuery:

<script type="text/javascript">
    $(function()){
        $("#signup_button").click(function() {
            var firstname = $("input#firstname").val();
            var lastname = $("input#lastname").val();
            var email = $("input#signup_email").val();
            var gender = $("select#gender").val();
            var password = $("input#signup_password").val();

            var datastring = 'new=yes'+'&firstname='+firstname+'&lastname='+lastname'&email='+email+'&gender='+gender+'&password='+password;

            $.ajax({
                type:"POST";
                url:"api/signup.php";
                data: datastring;
                cache: true;
                success: function(html) {
                    $.("#alert_succes_congrats").css('display', '');
                }
            }) 
            return false;
        })
    }
</script>

Thank you.

Answer 1

You have two options to solve your problem:

1st option:

Change

<input type="submit" id="signup_button" name="signup_button" class="btn btn-primary" value="Sign up">

To

<input type="button" id="signup_button" name="signup_button" class="btn btn-primary" value="Sign up">

So the button will not trigger a form submit.

2nd option:

Put an event.preventDefault at your click handler.

$("#signup_button").click(function(event) {
    /* Your stuff */
    event.preventDefault();
}

So it will not trigger browser default action to form submit button.

Answer 2

You code has lot of syntax error:

$(function()){

Should be

$(function(){

Plus the ajax members should be separated by comma and not semi-colon, there was issue in string concatenation as well. Next time this happens, please check the browser console for any javascript issues.

This should work

<script type="text/javascript">
$(function(){
    $("#signup_button").click(function() {
        var firstname = $("input#firstname").val();
        var lastname = $("input#lastname").val();
        var email = $("input#signup_email").val();
        var gender = $("select#gender").val();
        var password = $("input#signup_password").val();

        var datastring = 'new=yes'+'&firstname='+firstname+'&lastname='+lastname+'&email='+email+'&gender='+gender+'&password='+password;

        $.ajax({
            type:"POST",
            url:"api/signup.php",
            data: datastring,
            cache: true,
            success: function(html) {
                $("#alert_succes_congrats").css('display', '');
            }
        }); 
    return false;
    });
});