如何在页面刷新时保留随机生成的HTML文本字段的值？

Question

I am creating HTML text at runtime like my following code.

<?php
session_start();
for(var i=1;i<=10;i++)
{ 
?>
    <div id="mainDiv<?php echo $i; ?>">
        <input type="text" id="myText<?php echo $i; ?>">
        <button type="button" id="myButton<?php echo $i; ?>" onclick="myButtonClicked()">Click Me</button>       
    </div>
<?php
}
?>

It is working fine. Problem is now in retaining the values of these textboxes. When I refresh the page, all the values previously entered are gone. Do I need to create 10 sessions to retain the values of these 10 texts? Or, is there any other way of doing this?

Answer 1

You can use the locaStorage api for retain the user input by store/get to/from localStorage after page refresh. setItem() and getItem() are used for store and get item from localStorage respectively.

Example

This html will be created by php

<input type="text" id="text1" value="" />
<button type="button" id="myButton1" onclick="myButtonClicked('text1')">Click Me</button>

<input type="text" id="text2" value="" />
<button type="button" id="myButton1" onclick="myButtonClicked('text2')">Click Me</button>       
//like this other input and button will be created.

JS

if(localStorage.getItem('resArr') == null){
    var resultArr = [];
}else{
    resultArr = JSON.parse(localStorage.getItem('resArr'));
    //---- get stored item from localStorage by json parsing
}

alert('the last item you entered is ' + resultArr[resultArr.length-1]);
function myButtonClicked(id){
    var userVal = document.getElementById(id).value;
    resultArr.push(userVal);
    localStorage.setItem('resArr', JSON.stringify(resultArr));
    //stored the entered value in localStorage by doing stringify
}

DEMO

Answer 2

I don't know if this will help you exactly
but you can achieve what you want through a form that submits to php_self..

<?php

//create blank array for storing text box values
for($i=1;$i<=10;$i++){
   $textValue[$i]='';}

//if page reached via submission of button, store posted text box values in array
if(isset($_POST['myButton'])){
   for($i=1;$i<=count($textValue);$i++){
      $textValue[$i]=$_POST['myText'.$i];}}

?>

 <!--create form that submits to same page-->
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" enctype="multipart/form-data" name="main">

<?php

//loop creates text boxes and buttons while getting text box default values from $textValue Array
for ($i=1;$i<=count($textValue);$i++){ 
   echo '<div id="mainDiv'.$i.'">
   <input type="text" id="myText'.$i.'" name="myText'.$i.'" value="'.$textValue[$i].'"/>
   <button id="myButton'.$i.'" name="myButton" value="myButton'.$i.'">Click Me</button>    
</div>
';}

?>

</form>