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

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:

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.

Let PHP and Javascript experts handle your WordPress Problems

We know and love WordPress. This dedication drives our intent to build PHP, HTML, CSS and Javascript expertise.Contact Us

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.

<inputtype='hidden'name='del_id'id='row_del_id'value=''>

Handle Delete link Clicked

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

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.

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.

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.