PHP Not Picking Up Post Data from jQuery AJAX Form Submit

Question

I have a form with a submit button like this:

<form action="?edit-form" method="post" class="addEdit">
    <input type="submit" name="delete-image" value="Delete Image">
</form>

My jQuery AJAX is:

$.ajax({
    url: $('form.addEdit').attr('action'),
    type: $('form.addEdit').attr('method'),
    data: $('form.addEdit').serialize(),
    success: function(html) { }
});

In my PHP, I am unable to pick up that $_POST['delete-image'] isset() eventhough the submit button that sent the form is named "delete-image".

if (isset($_POST['delete-image'])) {
}

"delete-image" should be set since that was the submit button I clicked. Why is PHP not picking up this posted varaible from this AJAX submit?

Matt, yes, it's short for "index.php?edit-form." I tried that URL but it still doesn't work. — GTS Joe
– GTS Joe, Commented Jul 29, 2014 at 5:30

Ivan · Accepted Answer · 2014-07-29 06:16:59Z

2

In jQuery documenation here: http://api.jquery.com/serialize/
Only succesful control are serialized, please see the documentation below:

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

So submit buttn won't serialize through jQuery.serialize() function. The work around is you can add hidden input, and it will serialized.

UPDATE:
You need to change the form submit ajax to bind the button click. and in ajax request you can add the button value manually. Below is my code that is working.

$( "#delImage" ).click(function( event ) {
    event.preventDefault();
    $form = $(this).parent('form');
    $btnid = $(this).attr('name');
    $btnval = $(this).attr('value');


    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: { "btnid" : $btnid, "btnval": $btnval, "form-data": $form.serialize() },
        success: function(html) {
            console.log(html);
        }
    });
});

edited Jul 29, 2014 at 6:16

answered Jul 29, 2014 at 5:37

Ivan

7141 gold badge12 silver badges28 bronze badges

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

7 Comments

GTS Joe Over a year ago

Ivan, good information. However, it's critical that I perform this AJAX when this specific button is clicked. Since the input submit button has a name "delete-image" isn't there some way that I can determine the form was submitted when this button was clicked?

Darren Over a year ago

@GTSJoe You could add a hidden input with a name of delete-image ?

GTS Joe Over a year ago

I can't add a hidden input field because I have two submit buttons in this form. So if a user clicked on the other button, the hidden input would be submitted when that button was clicked, too. I need to be able to pass the data in <input type="submit" name="delete-image" value="Delete Image"> only when that button is clicked, that's why it's crucial I avoid a hidden field.

GTS Joe Over a year ago

@Ivan: yes it does work, but now the page reloads like a regular submit. event.preventDefault(); is supposed to stop this but it doesn't. Why? The page shouldn't reload for an AJAX request.

Ivan Over a year ago

Probably there is an error in your jQuery script. please see from the chrome console for more details.

|

Double Prince · Accepted Answer · 2018-01-17 03:14:48Z

0

If you don't want the page to reload when the button is been click then just use the simple way of sending ajax call:

var mydata = $('form.addEdit').serialize();
$.ajax({
type:'POST',
url: 'file.php',
data: mydata,
dataType:'json',
success: function(responseText){
// enter code here
 });
}
});

simply having your form without those elements

<form class="addEdit">
<input type="submit" name="delete-image" value="Delete Image">
</form>

edited Jan 17, 2018 at 3:14

answered Jan 17, 2018 at 2:23

Double Prince

131 silver badge5 bronze badges

Collectives™ on Stack Overflow

PHP Not Picking Up Post Data from jQuery AJAX Form Submit

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related