Submit Data From Table Row with Button Using Javascript

Question

I have a dynamic list of records which I am displaying in a table with each row having two buttons, one will take a user to a page to view/edit the data, the other is used to delete the row item.

What I am trying to figure out is how to create the javascript to pull the lead_id hidden value for only that row when either of the buttons is selected.

I understand how to pull the values from a single result from a named element with js, just having issues understanding how to retrieve the single result from a row that the button is clicked on.

Here is the HTML:

<table id="lead_list" width="100%">

        <th>
    <tr>
        <td><strong>Date</strong></td>
        <td><strong>First Name</strong></td>
        <td><strong>Last Name</strong></td>
        <td><strong>Email</strong></td>
        <td><strong>Company</strong></td>
        <td><strong>Lead Status</strong></td>
        <td><strong>Actions</strong></td>
    </tr>
        </th>
    <tr>
        <td>2014-03-06</td>
        <td>Bob</td>
        <td>Wilson</td>
        <td><a href="mailto:test@test.com">test@test.com</a></td>
        <td>MyFunLIFE</td>
        <td>Subscribed</td>
        <td><input type="hidden" name="lead_id" value="379" />
            <input type="button" class="view-edit-lead" value="View/Edit" />
            <input type="button" class="delete-lead" value="Delete" /></td>
    </tr>
    <tr>
        <td>2014-03-06</td>
        <td>Tom</td>
        <td>Shuemate</td>
        <td><a href="mailto:test@test.com">test@test.com</a></td>
        <td>MyFunLIFE</td>
        <td>Subscribed</td>
        <td><input type="hidden" name="lead_id" value="377" />
            <input type="button" class="view-edit-lead" value="View/Edit" />
            <input type="button" class="delete-lead" value="Delete" /></td>
    </tr>
    <tr>
        <td>2014-03-06</td>
        <td>Biggie</td>
        <td>Smalls</td>
        <td><a href="mailto:test@test.com">test@test.com</a></td>
        <td>MyFunLIFE</td>
        <td>Subscribed</td>
        <td><input type="hidden" name="lead_id" value="376" />
            <input type="button" class="view-edit-lead" value="View/Edit" />
            <input type="button" class="delete-lead" value="Delete" /></td>
    </tr>
</table>

Here is the current js I am using for this:

$('td.wplp-inputs input').click(function(){ 

// Don't allow access to the page while we process data.
$.blockUI({ 

    message: '<h1>Just a moment</h1><br /><br />Lead is being deleted...', 
    css: { 
        top:  ($(window).height() - 400) /2 + 'px', 
        left: ($(window).width() - 400) /2 + 'px', 
        width: '400px',
        Height: '250px', 
        padding: '10px'
    } 

    });     


// if the button class is
if( $(this).is('.delete-lead') ) {
    /// delete
    data = new Object();
    data.lead_id = $(this).siblings('input[type="hidden"]').val();

    alert(JSON.stringify(data));          

    data.action = "delete_lead"; //the action to call
    data._ajax_nonce = wplpajaxobjfront.nonce; // This is the name of the nonce setup in the localize_script
    data.ajaxUsed = "yes";

    // Define the URL for the AJAX to call
    var url = wplpajaxobjfront.ajaxurl; 

    //alert( JSON.stringify( data ) );
    //alert( JSON.stringify( url ) );

    $.post(url, data, function(response) {

        alert(response);
        window.location.reload();
        //window.location.href = response;
        $.unblockUI();
        //window.open(response,"_blank","","");

    });

} else {
    /// edit/view

    alert(reponse);

}

return false;   //Do not remove!

});

Once I have the method of getting the data from only a single table row to submit, specifically the lead_id, I will be able to pass it to my PHP function without issue.

The issue with the js also is not letting other values to be passed into the var data, the only item currently returned from ajax call is the lead_id without the input name included, same for data.action, data.ajaxUsed and data._ajax_nonce etc.

Thank you in advance for any help regarding this.

Answer 1

here is a simple way to get lead_id value on each row when button click

$('td input').click(function(){
  var el = $(this).siblings('input[type="hidden"]');

  // to get input name  
  var data = {};    /// create new object
  data[el.attr('name')] = el.val() ; // lead_id to data
  data['action'] = 'delete_lead';    // add action to data
  console.log(data);                 // log data to check, open your console and see data

  if( $(this).is('.delete-lead') ) {
       /// delete
  } else {
       /// edit/view
  }
});