Submitting A Form Via AJAX

Question

I have a form that looks as following:

Solution 1:

When you click upon the button, you simply submit the form to the back-end. To override this behavior you should override submit action on the form. Old style:

<form onsubmit="javascript: return false;">

New style:

$('form').submit(function() { return false; });

And on submit you want to perform an ajax query:

$('form').submit(function() {
    $.ajax({  }); // here we perform ajax query
    return false; // we don't want our form to be submitted
});

Solution 2:

Use jQuery's preventDefault() method. Also, value() should be val().

$("#submitPasswordRequest").click(function (e) {
    e.preventDefault();
    var username = $('#passwordEmail').val();

    ...

});

Full code: http://jsfiddle.net/HXfwK/1/

You can also listen for the form's submit event:

$("form").submit(function (e) {
    e.preventDefault();
    var username = $('#passwordEmail').val();

    ...

});

Full code: http://jsfiddle.net/HXfwK/2/

Baca Juga

Solution 3:

jquery and ajax

$('form id goes here).submit(function(e){
e.preventDefault();

var assign_variable_name_to_field = $("#field_id").val();
...

if(assign_variable_name_to_field =="")
{
handle error here
}

(don't forget to handle errors also in the server side with php)

after everyting is good then here comes ajax

datastring = $("form_id").serialize();

$.ajax({
type:'post',
url:'url_of_your_php_file'
data: datastring,
datatype:'json',
...
success: function(msg){
if(msg.error==true)
{
show errors from server side without refreshing page
alert(msg.message)
//this will alert error message from php
}
else
{
show success message or redirect
alert(msg.message);
//this will alert success message from php
}

})

});

on php page

$variable = $_POST['field_name']; //don't use field_id if the field_id is different than field name

...

then use server side validation
if(!$variable)
{
$data['error']= true;
$data['message'] = "this field is required...blah";
echo json_encode($data);
}
else
{
after everything is good
do any crud or email sending 
and then
$data['error'] = "false";
$data['message'] = "thank you ....blah";
echo json_encode($data);
}

Solution 4:

You should use the form's submit handler instead of the click handler. Like this:

$("#formID").submit(function() {

    // ajax stuff here...

    return false;
});

And in the HTML, add the ID formID to your form element:

<form id="formID" accept-charset="UTF-8" action="{{ path("fos_user_resetting_send_email") }}" method="post">

Solution 5:

You need to prevent the form from submitting and refreshing the page, and then run your AJAX code:

$('form').on('submit',function(e){
    e.preventDefault();

   $.ajax({
       type: "POST",
       url: "/resetting/send-email",
       data: $('form').serialize(), // serializes the form's elements.
       success: function( data ) {
           console.log(data); // show response from the php script.
       }
   });

    return false;
});

JavaScript Square