submitting a form via AJAX

Question

I have a form that looks as following:

 <form accept-charset="UTF-8" action="{{ path("fos_user_resetting_send_email") }}" method="post">
     <div class="field">
          <label for="username">Email:</label>
          <input class="text" id="passwordEmail" name="username" required="required" size="30" type="text">
          <div class="field-meta">Put in your email, and we send you instructions for changing your password.</div>
     </div>

     <div class="field">
          <input id="submitPasswordRequest" class="full-width button" name="commit" tabindex="3" type="submit" value="Get Password">
     </div>

     <div class="field center">
          <a href="#" onclick='togglePasswordForm(); return false;' class="password_link extra_form_link">Nevermind, I Remembered</a>
     </div>

I am trying to do the post via AJAX, so I did a simple test like this:

  $("#submitPasswordRequest").click(function() {
       var username = $('#passwordEmail').value();
       console.log(username);

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

       return false;
  });

However it seems that the click function is not triggered and it goes to posting the form via the regular form action. What am I doing wrong here? I want to handle this via AJAX.

You should use `$('form').submit` instead of click event of button. Also, `$('form').serialize()` may help. — Haocheng, May 21 '13 at 02:50

score 2 · Accepted Answer · answered May 21 '13 at 02:53

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
});

chrx · Answer 2 · 2013-05-21T03:02:57.640

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/

score 1 · Answer 3 · answered May 21 '13 at 02:52

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);
}

Is that an answer to this question, or did you post that in the wrong place ? — adeneo, May 21 '13 at 02:53
I'm giving an example on how to handle form submit with ajax, jquery, and php. the title says submitting a form via ajax. so i was showing the user how I handle form submission without a refresh — Rachid, May 21 '13 at 02:57
As a new member, all is forgiven, and I'll give you an upvote for effort, but I'm not really sure this answers the question ? — adeneo, May 21 '13 at 03:03
thanks. I appreciate it. the way I answered the question is because the user said he is just testing. So I wanted to show him an example of how to use ajax, jquery,and php. — Rachid, May 21 '13 at 03:09

score 1 · Answer 4 · answered May 21 '13 at 02:55

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">

score 1 · Answer 5 · answered May 21 '13 at 02:57

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;
});

submitting a form via AJAX

5 Answers5

Linked