jQuery AJAX not sending multiple submit buttons to PHP

Question

So my issue is submitting a form via AJAX with jQuery when I submit it to the PHP it doesn't matter what button submits the form when using the jQuery AJAX but when using a form action the form submits and lets me know if the delete or update button was pushed. For example here's the HTML to submit the form

<input type="submit" name="update" value="Update">
<input type="submit" name="delete" value="Delete">

Here's the AJAX Call below.

$(document).ready(function() {
    $("#update-form").submit(function () {
    $.ajax({  
      type: "POST",
      url: "updateHandler.php",  
      data: $("#update-form").serialize(),
      success: function(data) {
            var login = JSON.parse(data);
            if (login.success) {
                alert(login.message); //Show the ticket was updated!
            } else {
                alert(login.message);
            }
      }
    });  
    return false;       
  });
});

Now here's my PHP code that the AJAX Calls.

<?php
    $json_data = array();
    if(isset($_POST['delete'])) {
        $json_data['message'] = 'Ticket was deleted!';
    } else {
        $json_data['message'] = 'Ticket was updated!';
    }


// Encode response as JSON
echo (json_encode($json_data));

?>

EDIT

After being asked for the console output here's what I got

The "No Button Pushed" if from the code from the answer by adeneo

{"success":true,"message":"No Button Pushed"}

Array
(
    [ticket-num] => 6
    [technician] => 1
    [category] => 1
    [email] => [email protected]
    [name] => Ned Stark
    [country] => Canada
    [issue] => I'm Having an issue with Product Y
)

Note: You could use the same button name with different values e.g. button name='action' value='update' and button name='action' value='delete' then you can just evaluate $_POST['action'] — Brock Hensley
– Brock Hensley, Commented Apr 11, 2013 at 20:36
If I press the Update button I get the message ' Ticket was Updated!' same as message is returned when I press the Delete button. The thing is from what I've read and tested is if the button is pressed and you use an isset(); on it then that button should return true and give the appropriate message. — Yoda
– Yoda, Commented Apr 11, 2013 at 20:47
The weird thing is it looks like my buttons are being serialized but the jQuery when sending the data to the server. — Yoda
– Yoda, Commented Apr 11, 2013 at 20:50

Yoda · Accepted Answer · 2013-04-11 23:18:06Z

What happend was the buttons weren't being serialized with the form because when submitting the for programmatically it doesn't know what button you pushed so it doesn't send it. So what I did was put a hidden input and changed the value of it depending on the button they clicked to submit the form.

Also note I defaulted the value of the choice to update. I did this so if a user uses the enter key on the keyboard to submit the form it will do something automatically and not error.

HTML

<input type="hidden" name="choice" id="choice" value="update">
<input type="submit" name="update" value="Update">
<input type="submit" name="delete" value="Delete">

jQuery

$('input[type="submit"]').click(function() {
     $('#choice').val(this.name)
});

PHP

if(isset($_POST['choice']) && $_POST['choice'] == "update") {
    //if user clicked update
} else if(isset($_POST['choice']) && $_POST['choice'] == "delete") {
    //user clicked delete.
}

Collectives™ on Stack Overflow

jQuery AJAX not sending multiple submit buttons to PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related