Editing MySQL table row data by PHP & Ajax
This tutorial is an extension of Editing single data of any record tutorial presented in Part 1. For better understanding it is highly recommended to read Part 1 of this tutorial before reading this.
Giving Option to Edit all the data of a row.We will display each student record ( student table sql dump is part of the zip file for download ) in a row and each data of the row will be kept inside a div tag. Each div tag will have unique id associated to it. By adding student id to each data we can create one unique div tag. Note that each student has one unique id. For example student with id = 6 will have div tag associated with mark data like this.
Similarly the student with id=8 will have class data like this
This way all the records will have unique identity for the div tags matching to their respective id.
Inside edit_field(id) function we can create eight variables to read all the data ( two for each data ) present in that particular row ( or record ). Here is an example to read and assign a text field to take care of user inputs.
Using these two variables we can read the mark data and create one input text box to take new value.
Here we are reading the value from the div tag and displaying the text box with a unique id. The same system is followed for all other two fields ( name & class ) but the gender field is to be handled separetly.
Selection of radio buttonFor the gender field ( data ) we can’t display a text box and we have to give user an option to select Male or Female as sex. The present value ( of sex field ) we have to read and keep the respective radio button selected by default. User can change this selection and update the record.
Note that the pair of radio buttons of a record will have same name attribute but will have different id. So we will add one character ‘F’ to Female radio button and ‘M’ to mail radio button
In above code we read the default value of sex and compare it by using IF statement. Now if default value of sex is ‘male’ then the radio button with value = ‘male’ should be checked or selected. Similarly we have kept the Female radio button selected inside ELSE condition code block.
Update dataAfter entering the changes user will click the Update button. This button will pass the id value of the record to our Ajax script. Inside the Ajax function ajax(id), we will collect the id data and create variables to read the user updated data of the row.
Then by using getElementById() we will collect all the data of the record. Here is one sample.
We will post all the data to our backend PHP processing script display-ajax.php. This posting is by using POST method using Ajax.
display-ajax.phpThis PHP page operates at backend and update the database table. First we receive all the data posted to the script.
Next step is data validation. You may add more validation as per your requirement.
If the validation is passed then update the record based on the record id.
Now return the data by using Json.
Subscribe to our YouTube Channel here
This article is written by plus2net.com team. https://www.plus2net.com