Getting the value of a clicked button from a list of submit buttons

I would use the data attribute

So

<input type="button" value="Edit" class="action edit" data-id="1" />
<input type="button" value="Delete" class="action delete" data-id="1" />

...
<script type="text/javascript">
var url = 'ajax_script.php';
$(function() {
  $('.action').click(function(e) {
     e.preventDefault();
     var id = $(this).data('id');
     var action = $(this).hasClass('edit') ? 'edit' : 'delete';
     $.ajax(
         url: url,
         data: {id: id, action: action},
         type: 'POST',
         success: function(result) {
           // process return here. This could be to display a popup window
           // with either a confirm for delete or a form for edit
         }
       );
  });
});
</script>

Select allOpen in new window

In the above code we give our edit and delete buttons (which can be buttons or <a> or anything) a class of action to identify them as buttons we want to catch the click event for.
We then give the edit buttons an edit class and the delete buttons a delete class. We do  this because we are going to trap the event based on the .action class.

In the event handler we pull the id by accessing the data-id attribute using the JQuery .data method. You would use the corresponding record id for each pair of edit / delete buttons.

The action is set by checking for the edit class - if it exists then action is edit otherwise it is delete.

That's pretty much it - you have all the info you need to call your ajax function (bar any other data you are passing back as part of the edit)

Thanks for your reply julianH.

I am implementing your solution. I am assuming in - data-id="1", the 1 would be replaced by the record number as pulled from the database? That is <?php echo $row["recordid"]; ?>. Is my assumption correct?

Yes that is correct. Each button pair would have the id of the record it correpsonds to.

Thanks, working on it...

It looks like I have put everything in place but clicking the buttons is not giving any response... like $('.action').click not being triggered....

I have put the ajax code in an include file as - EditDelete.js and called it as

<script type="text/javascript" src="EditDelete.js"></script>

and this is the code below (added an alert on data and then tried to display the result in a div called editRecord):

var url = 'editDelete.php';
$(function() {
  $('.action').click(function(e) {
     e.preventDefault();
     var id = $(this).data('id');
     var action = $(this).hasClass('edit') ? 'edit' : 'delete';
     $.ajax(
         url: url,
         data: {id: id, action: action},
         type: 'POST',
         success: function(result) {
			// process return here. This could be to display a popup window
           // with either a confirm for delete or a form for edit

		alert (data);

		$("#editRecord").html(result);



}
       );
  });
});

Select allOpen in new window

Added code tags to your post.

The problem is you are missing {} around your ajax parameters - should be

$(function() {
  $('.action').click(function(e) {
     e.preventDefault();
     var id = $(this).data('id');
     var action = $(this).hasClass('edit') ? 'edit' : 'delete';
     $.ajax({ // ADD { HERE
         url: url,
         data: {id: id, action: action},
         type: 'POST',
         success: function(result) {
            // process return here. This could be to display a popup window
            // with either a confirm for delete or a form for edit
            alert (data);
            $("#editRecord").html(result);
         }
     }); // AND HERE
  });
}); 

Select allOpen in new window

Tried Firebug which indicated an error with $.ajax( ... ); and I added curly brackets $.ajax ({...}); but nothing changed. Click is not triggering anything.

Just did that and tested... no change.

Code of a button with ids 29 and 30 for example looks like:

<input type="button" value="Edit" class="action edit" data-id="29" />
<input type="button" value="Delete" class="action delete" data-id="29" />

<input type="button" value="Edit" class="action edit" data-id="30" />
<input type="button" value="Delete" class="action delete" data-id="30" />

Working on it...

Tested it with IE, Firefox and Chrome. It worked! Do you recommend another function for the update and deletion? Will award you the full points...

Do you recommend another function for the update and deletion?

Not sure what the question is - can you elaborate?

I guess that would be another question.... I was thinking about how to do the "delete" or "update" after the record has been identified and displayed. Whether it is better to modify and use the same ajax and php code or to use a fresh one.

There are many ways to skin a cat - which way is best depends on the specifics of your implementation.

Here are some of the challenges you will face with doing this by AJAX.

1. You have to build and display the edit / delete form based on an AJAX return. Not too difficult you can just mark it up and display it in a popup - either your own or a JQueryUI dialog.
The dialog can either be sourced by AJAX or can be a template already in the page that is populated with data returned by the AJAX call. Each approach has its merits.

2. Validation will have to be built into the form - either as an included script in the returned form - or a script on the originating page. Either way you will need to look at dynamic binding - controls created on the page after load wont be bound to events unless you bind them with the .on() method.

3. The next step is submission - you will need to collect the data and submit it back for processing

4. You will need to refresh the screen with the updated information - either as a complete table redraw - or just the row affected. Again mertis / demerits with both.

One option is to implement the actual functionality for delete / edit inside an IFrame that goes back to a page on the server.

It is very difficult to recommend which way to go - it all depends on the framework you are using and how your code is strucutred and how comfortable you are with AJAX and the processing that goes with it.

There are a bunch of javascript frameworks out there that you could use - but you would need to take the time to learn how they work and many of them would require you design your application around them rather than just implementing for a particular instance.

One strategy is to build the Delete / Update cycle as separate pages - once that is working you can then Piggy Back the AJAX functionality on the back - either using an IFrame to those existing screens or retrieiving the HTML via AJAX and populating a popup.

Excellent elaboration... very important what you have said regarding binding with .on() method.

You are welcome - thanks for the points.