CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Kharkooza Boche
Kharkooza Boche

Reputation: 63

jQuery submit form and get response

I have a webpage that will submit a form and redirect to another page. Is there a way to do this through jQuery, and get the response page in a callback function? So that the page won't redirect and I can show a message from the server in the same page.

I have tried the following code but it doesn't work:

$('#reset-password-form').submit(function(data){
    console.log(data);
    return false;
});

Also I tried following code snippet, which also didn't work:

$('#reset-password-form').submit(function(data){
    $.ajax({
        url: window.location.href,
        // contentType: 'multipart/form-data',
        cache: false,
        // contentType: 'text/html',
        contentType: 'application/x-www-form-urlencoded',
        // processData: false,
        type: 'POST',
        data : $('#reset-password-form').serialize(),
        success: function(data){
            console.log(data);
            console.log('form submitted.');
        },
        error:function(data){
            console.log(data);
            console.log('form error.');
        },
        failure: function(data){
            console.log(data);
            console.log('form submit failed.');
        }
    });
    return false;
});

Please advise.

Adding HTML Section:

<form id="reset-password-form">
   <div data-message-bar="">

   </div>
   <input type="hidden" name="username" value="dummy">
   <input type="hidden" name="validationToken" value="248gf293g2793g273f972">
   <input required="" name="password" type="password">
   <input required="" name="passwordconfirm" type="password">
   <button data-action="reset-password">Reset Password</button>
</form>

Upvotes: 1

Views: 6788

Answers (3)

imskm
imskm

Reputation: 805

remove data from function and do not return false

$(document).on('submit', '#reset-password-form',function(e){
   $.ajax({
        url: window.location.href,
        // contentType: 'multipart/form-data',
        cache: false,
        // contentType: 'text/html',
        contentType: 'application/x-www-form-urlencoded',
        // processData: false,
        type: 'POST',
        data : $('#reset-password-form').serialize(),
        success: function(data){
            console.log(data);
            console.log('form submitted.');
        },
        error:function(data){
            console.log(data);
            console.log('form error.');
        },
        failure: function(data){
            console.log(data);
            console.log('form submit failed.');
        }
    })
    .done(function(){
         alert("Done");
         $('#reset-password-form')[0].reset();
    });
    e.preventdefault(); // stop page refresh
 });

Upvotes: 0

Madhvesh S
Madhvesh S

Reputation: 139

Do not return anything, returning false ll quit form submission 

<form onSubmit="formSubmit()" id="reset-password-form">
   <div data-message-bar="">

   </div>
   <input type="hidden" name="username" value="dummy">
   <input type="hidden" name="validationToken" value="248gf293g2793g273f972">
   <input required="" name="password" type="password">
   <input required="" name="passwordconfirm" type="password">
   <button data-action="reset-password">Reset Password</button>
</form>

function formSubmit(){
    $.ajax({
            url: window.location.href,
            // contentType: 'multipart/form-data',
            cache: false,
            // contentType: 'text/html',
            contentType: 'application/x-www-form-urlencoded',
            // processData: false,
            type: 'POST',
            data : $('#reset-password-form').serialize(),
            success: function(data){
                console.log(data);
                console.log('form submitted.');
            },
            error:function(data){
                console.log(data);
                console.log('form error.');
            },
            failure: function(data){
                console.log(data);
                console.log('form submit failed.');
            }
        });
}

Upvotes: 0

hasan
hasan

Reputation: 3502

you can use this

 <button id="resetpass" data-action="reset-password">Reset Password</button>
$("#resetpass").on("click", function(event){
    $.ajax({
            url: window.location.href,
            // contentType: 'multipart/form-data',
            cache: false,
            // contentType: 'text/html',
            contentType: 'application/x-www-form-urlencoded',
            // processData: false,
            type: 'POST',
            data : $('#reset-password-form').serialize(),
            success: function(data){
                console.log(data);
                console.log('form submitted.');
            },
            error:function(data){
                console.log(data);
                console.log('form error.');
            },
            failure: function(data){
                console.log(data);
                console.log('form submit failed.');
            }
        });

})

Upvotes: 1

Related Questions