jQuery: ajax, submit button that was clicked

Question

I have a form with several elements and two submit buttons: SAVE and DELETE. When submitting the form, via jQuery ajax, i need to know if the user clicked on DELETE so i can execute the code accordingly. The problem is that jQuery doesn't send the submit name and value. So, i've read here and found what it looks like the ideal workaround: use input for SAVE and a button for DELETE . With a DELETE button i can send the form with the name and value of the button, therefore execute the code for the delete. The problem is that im trying to tie the pieces together with no success. Here's my code:

HTML:

<form id="f-release" method="post" action="includes/submit_release.php">
    <fieldset>
        <input name="save" type="submit" value="save">
        <button name="delete" type="button" value="delete" onClick="return confirm('Do you really wish to permanently delete the record?')">Delete</button>
    </fieldset>
</form>

ajax:

$("form button[name=delete]").click(function() {
    var formData = $(this).closest('form').serializeArray();
    formData.push({name: this.name, value:this.value });
});

$('form#f-release').submit(function(event) {
    event.preventDefault();

    var form = $(this);

    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        dataType: "json"
    }).done(function(data) {

        alert('done');  

    }).fail(function(data) {

        alert('error!');

    });
});

php:

if (isset($_POST['releaseid']) && is_numeric($_POST['releaseid'])) {

    // save

} elseif (...delete...) {

    //delete

}

When i click delete, how do i submit the form with the name and value of the delete button so i can execute the php DELETE code correctly?

score 2 · Accepted Answer · edited May 23 '17 at 11:46

There are some options you can consider:

Usually you don't use POST method to delete record, you should use DELETE method instead. Then in your php code, decide what should the service do based on http method. (I'm not familiar with php but I believe it is possible, see this post Detecting request type in PHP (GET, POST, PUT or DELETE))
If you really have to use POST method for deletion, then you can have a hidden input:

<input type="hidden" name="method" value="submit">

then when user clicks delete button, set its value to "delete", when user clicks submit button, set its value to "submit" (or keep it untouched since I set its default value to "submit"). Doing so should let your php code be able to decide actions based on $_POST['method']

i had no idea that a DELETE method existed in PHP. This simplifies things a lot. Thanks — Marco, Mar 08 '15 at 18:52

score 1 · Answer 2 · answered Mar 08 '15 at 18:11

You can keep the delete and submit as input or buttons, it doesn't really make a difference. But they can be of the same element.

There are a few ways to handle this:

** create IDs for the delete and submit elements.

** then create an inline click handler, like this:

<button id="save" onClick="reply_click(this.id)">Save</button>
<button id="delete" onClick="reply_click(this.id)">Delete</button>

<script type="text/javascript">
function reply_click(clicked_id)
{
    // whatever code here...
    // clicked_id will refer to the ID that was clicked
    console.log(clicked_id); // try this
}
</script>

Alternatively, if you prefer to take a cleaner approach that separates concerns, and doesn't handle behavior in the HTML, you can try something like this:

** create IDs for the delete and submit elements.

** then loop through each of the matching elements and attach an event handler that will return the specific ID when clicked. That looks like this:

var element = document.querySelectorAll('button');
            var elementLength = element.length;
            for(var i = 0; i < elementLength; i++){
                element[i].addEventListener('click', function(){
                    console.log(this.id);
                });
            }

If you want to stick to jQuery:

** create IDs for the delete and submit elements.

** then you can do something like this:

$('button').click( function (event) {
    var currentId = event.target.id;
    // do stuff with currentId
 });

[Note: this answer addresses the detection of where your click events are coming from, but not specifically the workings of your AJAX call. I understand that this addresses what you were asking about.]

jQuery: ajax, submit button that was clicked

2 Answers2