即使刷新后仍保留文本框值

Question

即使在页面刷新之后，我也想保留文本框的值，而不是成功提交。

使用 cookie 或使用 php 会话

下面是代码：

<div class="block-content collapse in"> 
                         <div class="alert alert-success"><i class="icon-info-sign"></i> Please Fill in required details</div>                      
                            <form class="form-horizontal" method="post" enctype="multipart/form-data">                                          
                                <table style width="100%">
                                <tr>
                                <td>
                                        <div class="control-group">
                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>Client Name</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="name" id="name" placeholder="Name of Client" required>
                                            </div>
                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>ਨਾਮ</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="namepb" id="transliteratename" placeholder="ਨਾਮ" required>
                                            </div>
                                        </div>

                                </td>
                                <td>    
                                        <div class="control-group">
                                            <label class="control-label" style="font-size: 16px;" for="datepicker1"><b>Client's DOB</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="dob" id="datepicker1" placeholder="Date of Birth mm/dd/yyyy" required>
                                            </div>
                                        </div>
                                </td>

                                <td>
                                <div id="image-preview">
                                <label for="image-upload">Choose File</label>
                                <input type="file" name="Photo" id="image-upload" required/>
                                </div>
                                </td>   

                                </tr>

                                <tr>
                                <td>
                                        <div class="control-group">
                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>Father's Name</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="fname" id="inputPassword" placeholder="Client Father's Name" required>
                                            </div>
                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>ਪਿਤਾ ਦਾ ਨਾਮ</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="fnamepb" id="transliteratefname" placeholder="ਪਿਤਾ ਦਾ ਨਾਮ" required>
                                            </div>
                                        </div>
                                </td>   

                                <td>        
                                    <div class="control-group">
                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>Mobile Number</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="mobile" id="mobile" placeholder="Client's Mobile Number" required>
                                            </div>
                                        </div>

                                </td>                               
                                </tr>   

                                <tr>
                                <td>
                                        <div class="control-group">
                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>Address</b></label>
                                            <div class="controls">
                                            <textarea class="text" style="width:63%"; id="address" name="address" placeholder="Your Full Address" required></textarea>
                                            </div>
                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>ਪਤਾ </b></label>
                                            <div class="controls">
                                            <textarea class="text" style="width:63%"; id="transliterateaddress" name="addresspb" placeholder="ਪੂਰਾ ਪਤਾ" required></textarea>
                                            </div>
                                        </div>
                                </td>
                                <td>    
                                    <div class="control-group">
                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>Landline</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="landline" id="landline" placeholder="Client's Landline" required>
                                            </div>
                                        </div>  
                                </td>
                                </tr>
                                <tr>

                                <td>    
                                <div class="control-group">
                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>City</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="city" id="inputPassword" placeholder="VPO / City" required>
                                            </div>

                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>ਸ਼ਹਰ</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="citypb" id="transliteratecity" placeholder="ਵ.ਪ.ਓ / ਪਸ਼ਹਰ" required>
                                            </div>
                                    </div>
                                </td>
                                <td>    
                                <div class="control-group">
                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>Tehsil</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="tehsil" id="inputPassword" placeholder="Tehsil" required>
                                            </div>

                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>ਤੇਹ੍ਸਿਲ</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="tehsilpb" id="transliteratetehsil" placeholder="ਤੇਹ੍ਸਿਲ " required>
                                            </div>
                                </div>          
                                </td>
                                </tr>
                                <p> </p>
                                <tr>
                                <td>    
                                <div class="control-group">
                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>Distt.</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="distt" id="inputPassword" placeholder="District" required>
                                            </div>
                                        </div>
                                            <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>ਡਿਸਟ੍ਰਿਕ</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="disttpb" id="transliteratedistt" placeholder="ਡਿਸਟ੍ਰਿਕਟ" required>
                                            </div>
                                </td>

                                <td>
                                <label class="control-label" style="font-size: 16px;" for="inputPassword"><b>Any Add. Details</b></label>
                                            <div class="controls">
                                            <select name="add" id="add" required>
                                            <option  value="">---Select---</option>
                                            <option  value="yes">Yes</option>
                                            <option  value="no">No</option>
                                            </select>
                                            </div>
                                </td>
                                </tr>

                                <tr>
                                <td>
                                <div class="control-group">
                                            <label class="control-label" style="font-size: 16px;" id="la-add-address" for="inputPassword"><b>Additional Address</b></label>
                                            <div class="controls">
                                            <textarea class="text" style="width:63%"; id="addaddress" name="addaddress" placeholder="Your Full Address"></textarea>
                                            </div>
                                        </div>  
                                </td>
                                <td>
                                <div class="control-group">
                                            <label class="control-label" style="font-size: 16px;" id="la-add-city" for="inputPassword"><b>City</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="addcity" id="addcity" placeholder="VPO / City">
                                            </div>
                                        </div>      
                                </td>
                                </td>
                                <tr>
                                <td>

                                <div class="control-group">
                                            <label class="control-label" style="font-size: 16px;" id="la-add-mob" for="inputPassword"><b>Mobile</b></label>
                                            <div class="controls">
                                            <input type="text" class="span8" name="addmob" id="addmob" placeholder="Client's Mobile Number">
                                            </div>
                                        </div>      
                                </td>
                                <td>

                                </td>
                                </tr>

                                <tr>
                                <td>
                                <div class="control-group">
                                         <label class="control-label" style="font-size: 16px;" for="inputEmail"><b>Type of Loan</b></label>
                                            <div class="controls">
                                              <select name="loantype_id" class="chzn-select"  required/>
                                                 <option></option>
                                                 <?php $loan_type=mysql_query("select * from loan_type")or die(mysql_error()); 
                                                 while ($row=mysql_fetch_array($loan_type)){                                                
                                                 ?>
                                                 <option value="<?php echo $row['loantype_id']; ?>&nbspName&nbsp<?php echo $row['loanname']; ?>"><?php echo $row['loanname']; ?></option>
                                                 <?php } ?>
                                               </select>
                                             </div>
                                        </div>
                                </td>
                                </tr>

                                <tr>
                                <td>
                                        <div class="control-group">
                                        <div class="controls">
                                        <button name="save" id="save" data-placement="right" title="Click here to Save your new data." class="btn btn-primary"><i class="icon-save"></i> Next...</button>               
                                        </div>
                                        </div>
                                </td>       
                                </tr>       
                                        <script type="text/javascript">
                                        $(document).ready(function(){
                                        $('#save').tooltip('show');
                                        $('#save').tooltip('hide');
                                        });
                                        </script>

                                </tr>
                                </table>

                            </form>

如果有任何想法来解决这个问题，请使用 Cookies 或使用 PHP Session。

Answer 1

您可以使用 jQuery 和本地存储来解决这个问题。

这里已经回答了这个问题：Saving form data to local storage and show it on refresh

它基本上是在页面更改时运行加载/保存命令。

Answer 2

哦，是的！您可以使用 HTML5 的localStorage 或sessionStorage。

sessionStorage 将保留它直到会话处于活动状态，但是 localStorage 将保留它，直到您手动删除它为止。

请参阅下文，了解您可以将其存储在其中任何一个中的方式：

到商店：

localStorage.setItem('somekey','textboxValue') 
//or 
sessionStorage.setItem('somekey','textboxvalue')

检索

localStorage.getItem('somekey')
//or
sessionStorage.getItem('somekey');

Answer 3

    <script>
      $("#target").change(function(){

 if($(this).is(":checked")) {
            if (localStorage['first-name']) {
    $("input[name='first-name']").val(localStorage['first-name']);
    }
    if (localStorage['last-name']) {
    $("input[name='last-name']").val(localStorage['last-name']);
    }
    if (localStorage['your-email']) {
    $("input[name='your-email']").val(localStorage['your-email']);
    }
    }
    });
    $(".wpcf7-text").on("change",function () {
    //store vlues in session
    localStorage.setItem($(this).attr("name") , $(this).val());
    });
    </script>