2015-05-29 3 views
0

Когда пользователь нажимает «Новый ящик» после ввода информации в предыдущих созданных ячейках, я не хочу, чтобы старые данные, введенные пользователем, были удалены, когда кнопка «Новый ящик» нажата. Как сохранить старые введенные пользователем данные при создании нового TextBox?сохранение пользовательского ввода после создания нового текстового поля в javascript

<html> 
 
<head> 
 
    <script> 
 
    var boxCount=1; 
 
    var boxName=0; 
 
    function newBox(){ 
 
    \t var boxName="Box_"+boxCount; 
 
    \t document.getElementById('box').innerHTML+='<br><input type="text" name="'+boxName+'" placeholder="'+boxName+'"/><br>'; 
 
    \t boxCount+=1; 
 
    } 
 
    </script> 
 

 
</head> 
 
    <body> 
 
    <button type="button" onclick="newBox()">New Box</button> 
 
    <form action="#" method="post"> 
 
    <span id="box"></span><br> 
 
    <input type="submit" value="Submit"> 
 
    </form> 
 
    </body> 
 
    </html>

ответ

0

element.innerHTML разрушает Чайлдс все элемента.

Если вы хотите сохранить дочерние элементы, вам необходимо использовать функции DOM. element.appendChild() - это то, что вы ищете.

<html> 
<head> 
    <script> 
     var boxCount=1; 
     var boxName=0; 

     function newBox() 
     { 
      var input   = document.createElement("input"); 
      input.type   = "text"; 
      input.name   = "Box_" + boxCount; 
      input.placeholder = "Box_" + boxCount; 
      document.getElementById('box').appendChild(input); 

      var new_line = document.createElement("br"); 
      document.getElementById('box').appendChild(new_line); 

      boxCount++; 
     } 
     </script> 

    </head> 
    <body> 
     <button type="button" onclick="newBox()">New Box</button> 
     <form action="#" method="post"> 
      <span id="box"></span><br> 
      <input type="submit" value="Submit"> 
     </form> 
    </body> 
</html> 

Кроме того, вы можете получить все значения TextBox на стороне сервера, как массив, заменив input.name = "Box_" + boxCount; на input.name = "Box[" + boxCount + "]". Иногда заниматься этим проще.

+0

Не могли бы вы привести пример appendChild(), который я мог бы использовать для достижения цели, которую я ищу? –

Смежные вопросы