CODEWITHSUNDEEP
phpajax
John Corley
John Corley

Reputation: 23

ajax form submission, where am I going wrong?

I am trying to submit a password change with ajax, in order to be able to keep on the same ui.tab page, after the change, and give visual feedback. I can change the password if I leave the action="change_password_do.php" in the form, so the php file works. If I put action="" in the form I get nothing at all. Clearly there is a basic error in my ajax, but I am unable to find it. Can somebody please point me the right way?

<script type="text/javascript">
$(document).ready(function() {
    $('#new_password_submit').click(function() {
        $.ajax({
            type: "POST",
            url: "change_password_do.php",
            data: $("form.pw_todo").serialize()
        });
    });
});
</script>                       

<div id="tabs_6" class="tabs">
       <h2 class="tablecaption">Change your password</h2>

       <form id="change_pass" class="pw_todo" method="post" action="">

            <input class="formlogin" type="password" name="password1" placeholder="New Password" title="Type in your New Password"/><br />
            <input class="formlogin" type="password" name="password2" placeholder="Re-enter New Password" title="Re-type your New Password"/><br />
            <input type="submit" id="new_password_submit" value="Submit" class="button"/>

       </form>  
</div>

Upvotes: 2

Views: 161

Answers (4)

Netorica
Netorica

Reputation: 19337

I think you don't need to use any form or submit button because you pass your values through AJAX already, pass the values directly to the data property of $.ajax(); and continue your AJAX approach.

<script type="text/javascript">
$(document).ready(function() {       
    $('#new_password_submit').click(function(){ 
        $.ajax({
        type: "POST",
        url: "change_password_do.php",
        data: {'password1': $('#password1').val(),
               'password2': $('#password2').val()}
        });
    });
}); 
</script>                       

<div id="tabs_6" class="tabs">
       <h2 class="tablecaption">Change your password</h2>

            <input class="formlogin" type="password" name="password1" placeholder="New Password" title="Type in your New Password" id="password1"/><br />
            <input class="formlogin" type="password" name="password2" placeholder="Re-enter New Password" title="Re-type your New Password" id="password2"/><br />
            <input type="button" id="new_password_submit" value="Submit" class="button"/>

</div>

NOTE: I just added ID's password1 and password2 for your convenience

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038830

You need to cancel the default action of the button by returning false from the click handler:

$('#new_password_submit').click(function() {
    $.ajax({
        type: "POST",
        url: "change_password_do.php",
        data: $("form.pw_todo").serialize()
    });
    return false; // <-- That's very important
});

As an alternative you could cancel the default action like this:

<script type="text/javascript">
$(document).ready(function(evt) {
    $('#new_password_submit').click(function() {
        evt.preventDefault(); // <-- That's very important

        $.ajax({
            type: "POST",
            url: "change_password_do.php",
            data: $("form.pw_todo").serialize()
        });
    });
});
</script>

Since new_password_submit is a submit button if you do not cancel the default action inside the click handler when the button is clicked, the form will be submitted and the browser will redirect away from the page, leaving no time for your AJAX request to execute.

This being said I would recommend you subscribing to the .submit event of the form instead of the .click event of the submit button. This way you are guaranteed that the AJAX request will always execute. Remember that form could be submitted by other means than clicking on the submit button. For example the form could be submitted by the user pressing the Enter key while inside some input field. If he submits the form this way your AJAX request will never execute.

So, here's my recommended solution:

$('#change_pass').submit(function(evt) {
    evt.preventDefault(); // <-- That's very important

    $.ajax({
        type: this.method,
        url: this.action,
        data: $(this).serialize()
    });
});

Then make sure you have set the action attribute on the form:

<form id="change_pass" class="pw_todo" method="post" action="change_password_do.php">

Now all that the javascript is doing is unobtrusively AJAXifying the submission of the form. If the user has javascript disabled your code will still work.

Upvotes: 4

moonwave99
moonwave99

Reputation: 22817

Don't bind the click event of the button, bind the submit event of the form better.

<script type="text/javascript">

$(function() {
    $('#change_pass').submit(function(e) {

        // this will prevent default form behaviour
        e.preventDefault()

        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data){

                // consider displaying some message on success

            }
        });
    });
});

</script>

<form id="change_pass" class="pw_todo" method="post" action="change_password_do.php">

...

</form>

Upvotes: 0

ZolaKt
ZolaKt

Reputation: 4721

You have to cancel the submit event, or else the form will still be normally submitted, before the ajax call.

$('#new_password_submit').click(function(e){
        e.preventDefault();
        $.ajax({
            ....

Next you are missing a success function from your ajax call, so event if it works you wouldn't notice it visually, at least.

And last, check out the jQuery form plugin, it does exactly what you are looking for. Nothing fancy, but its useful if you need it a lot

Upvotes: 0

Related Questions