How to keep input in fields after form submitted for further update

Question

I wonder is it possible to keep the user input inside form field after form submitted, so that the user can update the entry. I've a html registration form [with some JS validation], then a php file to insert data to sql & meanwhile display back the inserted data in a table view. i also include the form's html code in php file so i can see the form after being submitted. but i couldn't keep the data in the field after form submitted! here is the form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript">
            <!--
            function validateNum(evt) {
                        var theEvent = evt;
                        var key = theEvent.keyCode || theEvent.which;
                        key = String.fromCharCode( key );
                        var regex = /[0-9]/;

                        if( !regex.test(key) ) {
                            theEvent.returnValue = false;
                            if(theEvent.preventDefault) theEvent.preventDefault();
                        }
                    }       
            function validate(evt){

                if( document.myForm.ic.value == ""){
                    alert( "IC Number cann't be empty!" );
                    document.myForm.ic.focus() ;
                    return false;}
                else if(isNaN( document.myForm.ic.value ) || document.myForm.ic.value.length != 12){
                    evt.preventDefault();

                    alert( "Please provide your correct IC Number!" );
                    document.myForm.ic.focus() ;
                    return false;}
                if( document.myForm.name.value == "") {

                    alert( "Name cann't be empty!" );
                    document.myForm.name.focus() ;
                    return false;
                } 

                if( document.myForm.contact.value == ""){

                    alert( "Contact number cann't be empty!");
                    document.myForm.contact.focus() ;
                    return false;
                    } else if(isNaN( document.myForm.contact.value )) 
                    {
                    evt.preventDefault();

                    alert( "Please provide your correct Contact Number!" );
                    document.myForm.contact.focus() ;
                    return false;

                }
                 if( document.myForm.address.value == "" ){
                    alert( "Please provide your Address!" );
                    document.myForm.address.focus() ;
                    return false;
                }
            }

            //-->
        </script>
    </head>
    <style type="text/css">
        h2 {
            color: #06C;
        }
        body {
            background-color: #FFC;
        }
    </style>

    <body>
        <form name="myForm" method="post" action="insert.php" onsubmit="return(validate(event));">
            <div align="center"><br>
                    <table width="453" border="0">
                        <tr>
                            <th colspan="4" bgcolor="#99FFFF" scope="col">
                                <h3>Workshop Name: PHP! </h3></th>
                        </tr>
                        <tr bgcolor="#99FF99">
                            <td width="142"> IC Number</td>
                            <td width="15"><div align="center">:</div></td>
                            <td colspan="2"><div align="right">
                                    <input
                                        name="ic" type="text" id="ic" maxlength="12" size="45" onkeypress='validateNum(event)'/>
                                </div></td>
                        </tr>
                        <tr bgcolor="#99FFFF">
                            <td>Full Name</td>
                            <td><div align="center">:</div></td>
                            <td colspan="2"><div align="right">
                                    <input
                                        name="name" type="text" id="name" size="45"/>
                                </div></td>
                        </tr>
                        <tr bgcolor="#99FF99">
                            <td>Contact No.</td>
                            <td><div align="center">:</div></td>
                            <td colspan="2"><div align="right">
                                    <input
                                        name="contact" type="text" id="contact" size="45" onkeypress='validateNum(event)' />
                                </div></td>
                        </tr>
                        <tr bgcolor="#99FFFF">
                            <td>Email</td>
                            <td><div align="center">:</div></td>
                            <td colspan="2"><div align="right">
                                    <input
                                        name="mail" type="text" id="mail" size="45"/>
                                </div></td>
                        </tr>
                        <tr bgcolor="#99FF99">
                            <td height="60">Address</td>
                            <td><div align="center">:</div></td>
                            <td colspan="2">
                                <div align="right">
                                    <textarea name="address" id="address" cols="35" rows="3"></textarea>
                                </div>
                            </td>
                        </tr>
                        <tr bgcolor="#99FFFF">
                            <td colspan="2">&nbsp;</td>
                            <td width="231"><input type="reset" value="Clear" /></td>
                            <td width="47"><div align="right">
                                    <input type="submit" value="Submit" />
                                </div></td>
                        </tr>
                    </table>

                    <br>
                        </div>
                        </form>
                     </body>
                 </html>

here is the insert.php file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript">
            <!--
            function validateNum(evt) {
                        var theEvent = evt;
                        var key = theEvent.keyCode || theEvent.which;
                        key = String.fromCharCode( key );
                        var regex = /[0-9]/;

                        if( !regex.test(key) ) {
                            theEvent.returnValue = false;
                            if(theEvent.preventDefault) theEvent.preventDefault();
                        }
                    }       
            function validate(evt){

                if( document.myForm.ic.value == ""){
                    alert( "IC Number cann't be empty!" );
                    document.myForm.ic.focus() ;
                    return false;}
                else if(isNaN( document.myForm.ic.value ) || document.myForm.ic.value.length != 12){
                    evt.preventDefault();

                    alert( "Please provide your correct IC Number!" );
                    document.myForm.ic.focus() ;
                    return false;}
                if( document.myForm.name.value == "") {

                    alert( "Name cann't be empty!" );
                    document.myForm.name.focus() ;
                    return false;
                } 

                if( document.myForm.contact.value == ""){

                    alert( "Contact number cann't be empty!");
                    document.myForm.contact.focus() ;
                    return false;
                    } else if(isNaN( document.myForm.contact.value )) 
                    {
                    evt.preventDefault();

                    alert( "Please provide your correct Contact Number!" );
                    document.myForm.contact.focus() ;
                    return false;

                }
                 if( document.myForm.address.value == "" ){
                    alert( "Please provide your Address!" );
                    document.myForm.address.focus() ;
                    return false;
                }
            }

            //-->
        </script>
    </head>
    <style type="text/css">
        h2 {
            color: #06C;
        }
        body {
            background-color: #FFC;
        }
    </style>

    <body>
        <form name="myForm" method="post" action="update.php" onsubmit="return(validate(event));">
            <div align="center"><br>
                    <table width="453" border="0">
                        <tr>
                            <th colspan="4" bgcolor="#99FFFF" scope="col">
                                <h3>Workshop Name: PHP! </h3></th>
                        </tr>
                        <tr bgcolor="#99FF99">
                            <td width="142"> IC Number</td>
                            <td width="15"><div align="center">:</div></td>
                            <td colspan="2"><div align="right">
                                    <input
                                        name="ic" type="text" id="ic" maxlength="12" size="45" onkeypress='validateNum(event)'/>
                                </div></td>
                        </tr>
                        <tr bgcolor="#99FFFF">
                            <td>Full Name</td>
                            <td><div align="center">:</div></td>
                            <td colspan="2"><div align="right">
                                    <input
                                        name="name" type="text" id="name" size="45"/>
                                </div></td>
                        </tr>
                        <tr bgcolor="#99FF99">
                            <td>Contact No.</td>
                            <td><div align="center">:</div></td>
                            <td colspan="2"><div align="right">
                                    <input
                                        name="contact" type="text" id="contact" size="45" onkeypress='validateNum(event)' />
                                </div></td>
                        </tr>
                        <tr bgcolor="#99FFFF">
                            <td>Email</td>
                            <td><div align="center">:</div></td>
                            <td colspan="2"><div align="right">
                                    <input
                                        name="mail" type="text" id="mail" size="45"/>
                                </div></td>
                        </tr>
                        <tr bgcolor="#99FF99">
                            <td height="60">Address</td>
                            <td><div align="center">:</div></td>
                            <td colspan="2">
                                <div align="right">
                                    <textarea name="address" id="address" cols="35" rows="3"></textarea>
                                </div>
                            </td>
                        </tr>
                        <tr bgcolor="#99FFFF">
                            <td colspan="2">&nbsp;</td>
                            <td width="231"><input type="reset" value="Clear" /></td>
                            <td width="47"><div align="right">
                                    <input type="submit" value="Update" />
                                </div></td>
                        </tr>
                    </table>

                    <br>
                        </div>
                        </form>


                    <br>
                        </div>
                        </form>

                        <div align="center">
                          <?php
                        if (!mysql_connect('localhost', 'root', '')) {

                            echo "Connected";
                        }


                        mysql_select_db("workshop");


// Get values from form
                        $ic = mysql_real_escape_string($_POST['ic']);
                        $name = mysql_real_escape_string($_POST['name']);
                        $contact = mysql_real_escape_string($_POST['contact']);
                        $mail = mysql_real_escape_string($_POST['mail']);
                        $address = mysql_real_escape_string($_POST['address']);

                        if (staff_detail_exist($ic) == "available") {

                            insert_staff_detail($ic, $name, $contact, $mail, $address, $paytype);
                            echo "<p style='text-align:center; color:green;'>" . "Workshop application successful! You will be notified shortly via E-mail after confirmation! Thank You!";
                        } else if (staff_detail_exist($ic) == "exist") {

                            echo "<p style='text-align:center; color:red;'>" . "Record already exists! Please enter another Staff ID. Thank You!" . "</p>";
                        }

                        function insert_staff_detail($ic, $name, $contact, $mail, $address, $paytype) {

                            $sql = "INSERT INTO apply (staffid, staffname, staffno, staffemail, staffaddress, paytype) VALUES ('$ic', '$name', '$contact', '$mail', '$address','$paytype')";
                            mysql_query($sql);
                        }

                        function staff_detail_exist($ic) {

                            $result = null;
                            $sql = "SELECT * FROM apply WHERE staffid = '$ic'";
                            $data = mysql_query($sql);

                            if (mysql_num_rows($data) == 0) {

                                $result = "available";
                            } else {

                                $result = "exist";
                            }

                            return $result;
                        }

                $staffid = $_POST['ic'];

                $con = mysql_connect("localhost", "root", "");
                if (!$con) {
                    die('Could not connect: ' . mysql_error());
                }

                mysql_select_db("workshop", $con);
                $result = mysql_query("SELECT * FROM apply where staffid = '$ic'");

                echo "<table width=400 border=1 cellpadding=0 align=center>";

                while ($row = mysql_fetch_array($result)) {
                    echo "<tr>";
                    echo "<th>Staff/IC Number: </th><td>" . "<center>" . $row['staffid'] . "</center>" . "</td>";
                    echo "</tr>";
                    echo "<th>Name: </th><td>" . "<center>" . $row['staffname'] . "</center>" . "</td>";
                    echo "</tr>";
                    echo "<th>Email: </th><td>" . "<center>" . $row['staffemail'] . "</center>" . "</td>";
                    echo "</tr>";
                    echo "<th>Contact No.: </th><td>" . "<center>" . $row['staffno'] . "</center>" . "</td>";
                    echo "</tr>";
                    echo "<th>Address: </th><td>" . "<center>" . $row['staffaddress'] . "</center>" . "</td>";
                    echo "</tr>";
                }
                echo "</table>";

                mysql_close($con);
 ?>
                    </body>
                </html>

I've tried to add like value="<? echo "$row['staffid']"?>" in the form's field at php file but no luck! I've only basic in php. So, any help? thank you!

Retrieve last inserted row from db and use that values to appropriate text boxes. — suresh gopal, Dec 05 '12 at 04:46
Did you try `value=" echo $row['staffid']; ?>"` (You had too many quotes in your example - it would have owrked, but would be wierd) — Robbie, Dec 05 '12 at 04:50
@suresh.g thanks for your reply:) is the code like `SELECT LAST(ID) FROM $database_table;` ? — Atik, Dec 05 '12 at 04:56
Try MAX(ID) in query and use value=" echo $row['column_names']; ?>" in input boxes. — suresh gopal, Dec 05 '12 at 04:58
@Atik - you dont need to use two different files ! only one file would be ok. — Pankit Kapadia, Dec 05 '12 at 05:11
Sometimes people store validated form data in $_SESSION or $_COOKIE for later display. This is considerably more cost-effective than using a last insert from the database, as it saves a query. — Scotty C., Dec 05 '12 at 07:08

Atik · Accepted Answer · 2012-12-09T01:48:50.463

2

thanks all, its finally working :) i've used value="<?php echo isset($_POST['myField']) ? $_POST['myField'] : 'myField_db' ?>" inside the input tag. so, its like: <input type="text" name="myField" value="<?php echo isset($_POST['myField']) ? $_POST['myField'] : 'myField_db' ?>" /> where myField is input name & myField_db is the column name from database.

edited Dec 09 '12 at 01:48

answered Dec 06 '12 at 03:15

Atik

177
1
18

score 1 · Answer 2 · answered Dec 05 '12 at 05:05

1

Take the form posted values just above your html code like this
<?php
    if (isset($_POST["submit"]) && $_POST["submit"]=='Submit') {
        $name=$_POST["name"];
    }
?>

And echo it in your html form.
 <input name="name" type="text" id="name" size="45" value="<? echo $name?>"/>

answered Dec 05 '12 at 05:05

Reshil

471
3
9

will i add this on the top of my php file? – Atik Dec 05 '12 at 05:12
i got ` echo $staffid?>` back to the field :( – Atik Dec 05 '12 at 05:25

score 1 · Answer 3 · edited Dec 07 '12 at 10:03

1

I've used this function a few times; quite handy

function getPost($field){
   return (isset($_POST[$field]) && $_POST[$field] != "" ? $_POST[$field] : "");
}

Usage

<input type="text" name="contact" value="<?php echo getPost("contact"); ?>" />

This is for the cases where a user submits information and is for some reason sent back to the form again - perhaps their entries didn't pass PHP validation, for example.

edited Dec 07 '12 at 10:03

lortabac

589
4
16

answered Dec 05 '12 at 05:18

DACrosby

11,116
3
39
51

thanks for reply:) can you please explain the `field` a bit? i didn't get it:( – Atik Dec 05 '12 at 05:27
is it like i've call by the field name[id,name,contact]? – Atik Dec 05 '12 at 05:30
`field` is a parameter of `function getField`. Basically, what you send to the function inside of the parens - ( ) - gets set to that parameter (think of it like a variable). So in the example, "contact" gets sent to the `getField` function and everywhere inside the function `field` represents "contact". It's the same idea as Reshil's answer, but I made it into a multi-use function. – DACrosby Dec 05 '12 at 05:37
the function's name is `getPost(field)` but when its used in input tag, its become `getField(contact)`. i didn't get it:/ if i want to get the value of contact then i've to use contact instead of `field`? – Atik Dec 05 '12 at 05:48
Take a look at http://www.w3schools.com/php/php_functions.asp, specifically the Adding Parameters section. They explain it pretty well! – DACrosby Dec 05 '12 at 22:07
No problem! Be sure to mark the answer as correct if it is so! – DACrosby Dec 06 '12 at 06:44
This wont work if the user posted the data to some other file and gets redirected back to the form page right ? – Vishal Nair Jul 15 '14 at 20:06
1

@VishalNair This part specifically works, but you need to modify how you handle the form/request, probably using cURL extension of PHP. See [here for more details](http://stackoverflow.com/questions/2865289/php-redirection-with-post-parameters) – DACrosby Jul 15 '14 at 20:13
@DACrosby ok so the flow would be , 1) submit get data to the same page 2) check if isset GET data at the top of the page 3) if yes then collect all that data and use cURL to POST it 4) the page which is called by cURL will return the POST data as it is if some validation error occurred or else it will return true ... Is this flow correct ? – Vishal Nair Jul 15 '14 at 20:57
Sounds like you have a different setup than described in this discussion - you'd be best served looking for a more relevant question, or asking a new one. If you're using 3rd page for validation, you'd be better served using ajax (usually). GET is likely not necessary at all. It's hard to say without knowing what you're doing. – DACrosby Jul 16 '14 at 04:44

How to keep input in fields after form submitted for further update

3 Answers3

Linked

Related