Search
Close this search box.
Search

Pass Value from jQuery to PHP in a Form: To Delete a Table Row from FE

Listen to this article

During the course of web development, you will certainly come across a use case to send data from Javascript to PHP and back. The reason being that, Javascript is used on client side and PHP is used on the server side. We had a user requirement once, that demanded such a scenario. The requirement itself was easy to understand, but a little tricky to implement.

Consider a use case where a row can be deleted from a table, if user clicks delete.

  • A table has to be displayed, with a delete option for every row.
  • The delete option is provided as a link.

  • Every time the delete link is clicked, the corresponding row has to be deleted.

To implement this, we would have to use jQuery and PHP. How and Why is explained below.

Creating the table and Providing a delete link

The table is created using a form. Data for each row of the table, is fetched from the WordPress database. Each row is displayed using a simple for loop, inside the form. The delete link, is added in every row as follows:

<a href='' name='delete' row_id='$id' class='delete_row' style='color:red'>Delete</a>

where row_id is set to the id of the corresponding row, fetched from the database. This is to associate the delete link with the row.

Each delete link, has the same name ‘delete’. Thus if we get the row_id directly from the $_POST variable, always the row_id of the last instance will be sent and not necessarily the one the user has clicked.

To know which link the user has clicked, we have to handle the clicked event, using jQuery. And store the value of row_id, of the clicked link, in a hidden variable in the form itself. The value of this hidden variable can then be retrieved from the $_POST variable and the appropriate row can be deleted.

[space]

Providing a hidden variable to store the row_id

This hidden variable will be part of the form, but outside the table, as a separate element.

<input type='hidden' name='del_id' id='row_del_id' value=''>

[space]

Handle Delete link Clicked

On delete link clicked, jQuery will fetch the id of the row, row_id, to be deleted.

<script>
jQuery('.btn_delete_row').click(function()
{
    var current_id = jQuery(this).attr('row_id');

    // assign the row_id to the hidden field
    jQuery('#del_id').val(current_id);

    // submit the form, to retrieve the del_id value from $_POST
    jQuery( "#form1" ).submit();
    return false;
});
</script>

[space]

Perform Delete Operation

When the form is submitted, we can retrieve the value of the hidden field and delete the row.

if(isset($_POST['del_id']))
{
    $delete_row_id=$_POST['del_id'];
    global $wpdb;
    $example_table=$wpdb->prefix.'table_prefix';
    $wpdb->delete($example_table, array('example_row_id' => $delete_row_id), array('%d'));
}

[space]

Using this simple idea, of providing a hidden field in the form, we could solve our problem of sending data from jQuery to PHP. If you had any questions regarding this, you could let us know through the comment section below.

Pooja Mistry

Pooja Mistry

9 Responses

  1. it’s very useful. .. I want to know how to get name value to php page e.g
    Apple
    Orange
    once click Apple then name value go to php page
    $page=$_GET[‘ here clicked name value ‘];
    echo “$page”;

    SELECT * FROM table_name WHERE product=’$page’
    then display related records..
    For get name value need to use jquery ajax or what ?
    please help me.. thanks

    1. Hi,
      You’ll have to follow the same approach mentioned in the article. Use jQuery to fetch the name of the cliked element (var name = $(“[selector]”).attr(“name”);), and save it in a hidden field. You can then get the name using the $_POST variable in your PHP file.

  2. thanks your reply .. am new to this kind of programming .. how to contact to make kind of website dynamic display site

  3. hi, i am rafeeque, i want to know how to access a value that was sent to a bootstrap modal by jquery.. i want to do some db operations on modal.. thanks in advance

    1. Hi Rafeeque,

      If I’ve understood your requirements correctly, you want to make some changes in the database (which will be then shown in the modal), based on some value entered, right? In this case you will have to register if the value of a field has been changed, and then use the wp_ajax action, to send the value to PHP and then handle the response.

      Hope that helps you.

  4. Hi, This is Suneet, Pls help me I want to know how to pass value from return from jquery to a php variable

  5. Nice post..
    Please solve my query too, as I want to make a form which have dynamic input boxes. I want that when I submit my form my all data will insert into database . I ma doing this code in codeigniter.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads