再次单击按钮使字段重置

Posted 2023-05-07

【中文标题】再次单击按钮使字段重置

【英文标题】：clicking the button again making the field reset

【发布时间】：2016-11-03 13:36:07

【问题描述】：

当我单击添加按钮时，它会使先前的值消失。 例如，如果我第一次单击添加并在第一个输入框中输入值。然后单击添加按钮，它使以前的值从输入框中消失

  function addInput(event) 
    var field =
      '<div class="form-group"><input type="text" class="form-control" name="selected_text" placeholder="Selected Text"></div>' +
      '<div class="form-group"><input type="text" class="form-control" name="selected_route_url" placeholder="Route Url for selected text"></div>' +
      '<div class="form-group"><input type="text" class="form-control" name="unselected_text" placeholder="UnSelected Text"></div>' +
      '<div class="form-group"><input type="text" class="form-control" name="unselected_route_url" placeholder="Route Url for unselected text"></div>'
    document.getElementById('inputField').innerhtml += field;
    event.preventDefault();
  

<div class="form-group">
    <a class="btn btn-primary pull-left" onclick="addInput(event)">Add</a>
</div>
<div id="inputField" style="background-color:#eceff1;">
</div>

【参考方案1】：

向innerHTML 添加元素会预先重新加载整个元素。这就是值被重置的原因。

您可以尝试使用insertAdjacentHTML 函数。那么这一行

document.getElementById('inputField').innerHTML += field;

会变成这样

document.getElementById('inputField').insertAdjacentHTML('beforeend', field);

片段：

  function addInput(event) 
    var field =
      '<div class="form-group"><input type="text" class="form-control" name="selected_text" placeholder="Selected Text"></div>' +
      '<div class="form-group"><input type="text" class="form-control" name="selected_route_url" placeholder="Route Url for selected text"></div>' +
      '<div class="form-group"><input type="text" class="form-control" name="unselected_text" placeholder="UnSelected Text"></div>' +
      '<div class="form-group"><input type="text" class="form-control" name="unselected_route_url" placeholder="Route Url for unselected text"></div>'
    document.getElementById('inputField').insertAdjacentHTML('beforeend', field);
    event.preventDefault();
  

<div class="form-group">
    <a class="btn btn-primary pull-left" onclick="addInput(event)">Add</a>
</div>
<div id="inputField" style="background-color:#eceff1;">
</div>

来源：this similar answer

【参考方案2】：

我将程序完全转换为 jquery 及其工作..

 $("#link").click(function() 
   var field =
     '<div class="form-group"><input type="text" class="form-control" name="selected_text" placeholder="Selected Text"></div>' +
     '<div class="form-group"><input type="text" class="form-control" name="selected_route_url" placeholder="Route Url for selected text"></div>' +
     '<div class="form-group"><input type="text" class="form-control" name="unselected_text" placeholder="UnSelected Text"></div>' +
     '<div class="form-group"><input type="text" class="form-control" name="unselected_route_url" placeholder="Route Url for unselected text"></div>';
   $('#inputField').append(field);
   event.preventDefault();

 );

HTML

<div class="form-group">
  <a class="btn btn-primary pull-left" id="link">Add</a>
</div>
<div id="inputField" style="background-color:#eceff1;">
</div>

Fiddle