Trouble POSTing form with AJAX

Question

edit - the info appears to be posting, but on form_data.php it doesn't seem to be retrieving the posted values

Here's the AJAX

<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>

    $("#submit_boxes").submit(function() { return false; });
    $('input[type=submit]').click(function() {
        $.ajax({
              type: 'POST',
              url: 'form_data.php',
              data: $(this).serialize(),
              success: function(data) {
                $('#view_inputs').html(data); //view_inputs contains a PHP generated table with data that is processed from the post. Is this doable or does it have to be javascript?
       });
       return false;
        });
   };
  </script>
</head>

Here is the form I'm trying to submit

 <form action="#" id = "submit_boxes">
        <input type= "submit" name="submit_value"/>
        <input type="textbox" name="new_input">
 </form>

Here is the form_data page that gets the info posted to

<?php
    if($_POST['new_input']){
      echo "submitted";
      $value = $_POST['new_input'];
      $add_to_box = new dynamic_box();
      array_push($add_to_box->box_values,$value);
      print_r($add_to_box->box_values);
   }
?>

@Musa it may be basic for you but I'm not quite sure what that means. What do I define it as? — user1104854, Mar 25 '13 at 18:28
For easier debugging, remove `return false;`, add `e` as a parameter to the submit event handler, and use `e.preventDefault()` before the ajax request. Now you should see an error in your console instead of a page refresh. — Kevin B, Mar 25 '13 at 18:28
@KevinB I'm not seeing any errors displayed in the console or network tab. — user1104854, Mar 25 '13 at 18:33
@user1104854 After making my change, or before. Before making my change, you won't see any because the page refreshes, thus making them go away. — Kevin B, Mar 25 '13 at 18:35
@KevinB both with and without the prevent_default() I don't get any errors. The status code says 200 OK — user1104854, Mar 25 '13 at 18:40
@user1104854 Can you post your code after modifications here and provide a link to it? http://pastebin.com — Kevin B, Mar 25 '13 at 18:42

score 1 · Answer 1 · answered Mar 25 '13 at 18:59

1

Your form is submitting because you have errors which prevents the code that stops the form from submiting from running. Specifically dataType: dataType and this.html(data) . Firstly dataType is undefined, if you don't know what to set the data type to then leave it out. Secondly this refers to the form element which has no html method, you probably meant $(this).html(data) although this is unlikely what you wanted, most likely its $(this).serialize() you want. So your code should look like

$('form#submit_boxes').submit(function() {
    $.ajax({
        type: 'POST',
        url: 'form_data.php',
        data: $(this).serialize(),
        success: success
    })
    return false;
});

Additionally if you have to debug ajax in a form submit handler the first thing you do is prevent the form from submitting(returning false can only be done at the end) so you can see what errors occurred.

$('form#submit_boxes').submit(function(event) {
    event.preventDefault();
    ...
});

answered Mar 25 '13 at 18:59

Musa

96,336
17
118
137

I did exactly what you said and I'm still not seeing any errors. I'm using chrome and nothing is showing in the network or console. I even included the event.preventDefault(). – user1104854 Mar 26 '13 at 01:53
@user1104854 make sure that the function has `event` as the parameter. – Musa Mar 26 '13 at 02:05
Ok, so when I run that I get the following error "Uncaught reference error: success is not defined". When I delete the success statement it goes away, but I don't see any other errors. It shows the data is Posted correctly, however, on that page I used javascript to alert when it receives the POST, but that's not triggering – user1104854 Mar 26 '13 at 02:55
@user1104854 `success` is suppose to be a function that calls when the ajax request completes successfully(success is just a name it could be anything). I suggest having a read of api.jquery.com/jQuery.ajax/ – Musa Mar 26 '13 at 02:57
@user1104854 `on that page I used javascript to alert when it receives the POST, but that's not triggering` so you have `form_data.php` open in the browser waiting for an alert? – Musa Mar 26 '13 at 03:00
I updated my original post at the top. The data appears to be posting, but form_data.php doesn't appear to me noticing it – user1104854 Mar 26 '13 at 04:44
@user1104854 what does your success function look like. – Musa Mar 26 '13 at 05:08
Musa, I updated my code again. After the POST, as you can see on form_data PHP updates some variables which are displayed in view_inputs (the div updating on success. I couldn't find any examples with PHP so I'm not sure if this will work. Does it only update javascript or will PHP be updated in the div too? (considering it's server side) – user1104854 Mar 26 '13 at 11:11

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

You can use jQuery's .serialize() method to send form data

Some nice links below for you to understand that

jquery form.serialize and other parameters

http://www.tutorialspoint.com/jquery/ajax-serialize.htm

http://api.jquery.com/serialize/

edited May 23 '17 at 12:21

Community

1
1

answered Mar 25 '13 at 18:31

Arun

3,440
11
60
108

You sure OP doesn't want the form html :P. – Musa Mar 25 '13 at 18:35
OP = original poster, and that would be me – user1104854 Mar 25 '13 at 18:37
Ok !! .serialize would help you to get the form data serialized and send all the data to the server side – Arun Mar 25 '13 at 18:38

score 0 · Answer 3 · answered Mar 25 '13 at 18:42

One way to handle it...

Cancel the usual form submit:

$("#submit_boxes").submit(function() { return false; });

Then assign a click handler to your button:

$('input[type=submit]').click(function() {
            $.ajax({
                  type: 'POST',
                  url: 'form_data.php',
                  data: this.html(data),
                  success: success,
                  dataType: dataType
           })
           return false;
});

Trouble POSTing form with AJAX

3 Answers3