如何更新HTML表单数据？ [关闭]

I have a simple HTML form with several fields (like id, name, contact, and email). Once a user fills out the form and submits it, data will be stored in a database and at the same time (even on the same page), a table will display the data that has been stored.

Now, I want to put an update button at the bottom of the table. When the user clicks on it, they can view the form which will be pre-filled with the data they previously entered, so they don't need to type the data twice.

How can I do that? How can I catch the other fields based on the id field?

Once click the table data, pass its ID with it. Then check the ID & get the data from database and set the values in html form. If an ID is passed update should go and without ID it should be a new insert.

These is simple database operation. There are lots of tutorials on net, google it. You may refer this.

in case you want to show new entry on page with without refreshing the page use AJAX..
otherwise refresh the page and use Select query to show new entry.
for second question.. use Select query on update button press and then echo each field in value of your HTML input fields
this is one simple way to do it..

// php code
$result = mysql_query('Select * from table_name WHERE id = 1');
$row = mysql_fetch_assoc($result);
// use loop if query return multiple rows
// HTML code
<input type = "textbox" name="age" value="<?php echo $row['age'] ?>">

The form with the update button needs a hidden field for the id. Then the PHP needs to select the record, corresponding to the id, from the database and display it in a form.

If each page only has one record, you could put the pre-filled form in a div on the same page as the table. You could then use JavaScript to hide the div when the page loads and show the div when the user clicks on the update button.

You will have to use javascript and ajax code as mentioned below. Try understanding it.

<script type="text/javascript">  
$(document).ready(function(e) {
    $.ajax({
        //Your ajax here...
        success: function(response) {
            //Your code of showing inserted data in table....
            //get the inserted userid from response and set update button's ONCLICK attribute as mentioned below
            var userid = getuseridfromresponse;
            $("#updatebuttonid").attr("onclick","updaterecord("+userid+")");
        }
    });
});
function updaterecord(userid){
    $.ajax({
        //your ajax here you
        //send all the details from php code using JSON or whatever you are using.
        success: function(response) {
            //store all the data into js variables.
            var userid = response.userid;
            var fullname = response.fullname;
            // and so on..
            $("#fullname").val(fullname); //this will set the textbox value to fullname
            //and so on..
            $("#userid").val(userid); //this is a hidden input in inser form. by default it will be zero. you will need it while updating.
            $("#actionname").val("update"); //this is also hidden input in insert form. default value would be "insert"
            // you just need to check in php that which actionname you are getting.

            //if you will get actionname = insert Do insert code
            //if you will get actionname = update Do update code.
        }
    });
}
</script>