AJAX + PHP Form not passing variables?

Question

So normally I can get my ajax to work without any issues however for some reason my script isnt passing variables through to my PHP form. Ive been trying to debug for a while and am hoping a fresh set of eyes can point out whatever dumb error I got going on (i stripped it to bare bones for simplicity, this wont pass variable).

AJAX + FORM

$('#formid').on('submit', function(e){
   e.preventDefault(); 
   $.ajax({ 
      type: "POST",        
      url: 'page.php', 
      data: $(this).serialize(),
      success: function(data) {
        alert(data);
      }
   });
});


 <form id="formid" method="post">
   <input type="text" name="name">
   <input type="submit" value="Add">
 </form>

PAGE.php

//Get Variables
$name = $_POST['name'];

echo 'Name is: '.$name;

This should display an alert that says 'Name is (whatever the user puts in the form)'
However it does not echo back what the user submits in the form. Can anyone see something wrong with this script?

Something is wrong with posting the data back to the php page data: $(this).serialize()

David · Accepted Answer · 2014-02-08 02:11:50Z

2

The code looks clean, however there may be an issue with context when doing $(this).serialize() inside the ajax function. It may be better to save your data to a variable first. The result would look something like this:

$('#formid').on('submit', function(e){
    e.preventDefault();
    var my_data = $(this).serialize();
    $.ajax({ 
      type: "POST",        
      url: 'page.php', 
      data: my_data,
      success: function(data) {
        alert(data);
      }
    });
});

If this doesn't work then it may actually be an issue with the PHP side.

EDIT: Added rest of JS to be more concise and clear.

edited Feb 8, 2014 at 2:11

answered Feb 8, 2014 at 1:26

David

1431 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VIDesignz Over a year ago

I would even go a step further var my_data = $('#formid').serialize();

David Over a year ago

@VIDesignz I should have been clearer in my answer (now updated to be clearer), but what I had originally had was intended to go into the jQuery function as originally posted. Doing var my_data = $('#formid').serialize(); is redundant as $(this) is the same as $('#formid') in this context (inside the $.ajax() call it is different though). Thanks for showing it wasn't clear enough though!

ivankoni · Accepted Answer · 2014-02-08 01:12:10Z

1

You should set form method as POST:

<form id="formid" method="post">

answered Feb 8, 2014 at 1:12

ivankoni

6511 gold badge4 silver badges12 bronze badges

Comments

Fernando Prieto · Accepted Answer · 2014-02-08 01:26:08Z

1

Your code seems to be ok. $(this).serialize() should not be the problem, but if you think so, you can give an id to the text input and try data: {name: $('#your-input-id-here').val()}.

An other thing could be that e.preventDefault(); may not be working properly. Try to place it after the ajax call or replace it by return false; after the ajax call.

edited Feb 8, 2014 at 1:26

answered Feb 8, 2014 at 1:20

Fernando Prieto

5201 gold badge6 silver badges20 bronze badges

Comments

user934902 · Accepted Answer · 2014-02-08 01:31:41Z

0

Thank you for all the responses, I have no idea why but adding the form in front of the id made it work. $('form#formid') I must have duplicate IDs on my page without realizing

answered Feb 8, 2014 at 1:31

user934902

1,2223 gold badges18 silver badges33 bronze badges

Collectives™ on Stack Overflow

AJAX + PHP Form not passing variables?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related