字段为空

时间：2018-07-30 09:40:36

标签： javascript html

这是一个简单的HTML页面，带有包含一些字段的表单，我知道在表单中可以有多个字段，这就是为什么当我们单击按钮时它创建了“添加新关系”按钮的原因，它在表单中添加了一些字段，但是旧田野变空 这是代码

document.getElementById('adRe').addEventListener('click',function(){
              
if(document.getElementById('rboxes').childElementCount < 10){
    document.getElementById('rboxes').innerHTML +='<div class="rbox"><div class="rheader"><svg onclick="rclose(this)" aria-hidden="true" data-prefix="far" data-icon="window-close" class="svg-inline--fa fa-window-close fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#7D0E19" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v340zM356.5 194.6L295.1 256l61.4 61.4c4.6 4.6 4.6 12.1 0 16.8l-22.3 22.3c-4.6 4.6-12.1 4.6-16.8 0L256 295.1l-61.4 61.4c-4.6 4.6-12.1 4.6-16.8 0l-22.3-22.3c-4.6-4.6-4.6-12.1 0-16.8l61.4-61.4-61.4-61.4c-4.6-4.6-4.6-12.1 0-16.8l22.3-22.3c4.6-4.6 12.1-4.6 16.8 0l61.4 61.4 61.4-61.4c4.6-4.6 12.1-4.6 16.8 0l22.3 22.3c4.7 4.6 4.7 12.1 0 16.8z"></path></svg></div><div class="row"><div class="form-group col-sm-6"><label class="control-label">Name</label><input name="rname[]" class="form-control" required=""></div><div class="form-group col-sm-6"><label class="control-label">Relationship</label><input name="rrelationship[]" class="form-control" required=""></div></div><div class="row"><div class="form-group col-sm-5"><label class="control-label">Telephone</label><input name="rtelephone[]" class="form-control" required=""></div><div class="form-group col-sm-7"><label class="control-label">Address</label><input name="raddress[]" class="form-control" required=""></div></div></div>';
}else{
    alert('You cannot add more than 10 relations');
}
    return false;
});
            
function rclose(a){
    a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
}
.rbox .rheader svg{
    height: 39px;
    float: right;
}
    <form>
    	<div class="rboxes" id="rboxes">
            <div class="rbox">
                <div class="rheader">
                    <svg onclick="rclose(this)" aria-hidden="true" data-prefix="far" data-icon="window-close" class="svg-inline--fa fa-window-close fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#7D0E19" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v340zM356.5 194.6L295.1 256l61.4 61.4c4.6 4.6 4.6 12.1 0 16.8l-22.3 22.3c-4.6 4.6-12.1 4.6-16.8 0L256 295.1l-61.4 61.4c-4.6 4.6-12.1 4.6-16.8 0l-22.3-22.3c-4.6-4.6-4.6-12.1 0-16.8l61.4-61.4-61.4-61.4c-4.6-4.6-4.6-12.1 0-16.8l22.3-22.3c4.6-4.6 12.1-4.6 16.8 0l61.4 61.4 61.4-61.4c4.6-4.6 12.1-4.6 16.8 0l22.3 22.3c4.7 4.6 4.7 12.1 0 16.8z"></path></svg>
                </div>
                <div class="row">
                    <div class="form-group col-sm-6">
                        <label class="control-label">Name</label>
                        <input name="rname[]" class="form-control" required/>
                    </div>
                    <div class="form-group col-sm-6">
                        <label class="control-label">Relationship</label>
                        <input name="rrelationship[]" class="form-control" required/>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-sm-5">
                        <label class="control-label">Telephone</label>
                        <input name="rtelephone[]" class="form-control" required/>
                    </div>
                    <div class="form-group col-sm-7">
                        <label class="control-label">Address</label>
                        <input name="raddress[]" class="form-control" required/>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <a class="btn btn-default" id="adRe">Add New Relation</a>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Create</button>
        </div>
    </form>

2 个答案:

答案 0 :(得分：7)

+=的意思是“读取此值，更改它，然后将新结果分配回去。”

使用innerHTML执行此操作时，会将DOM序列化为HTML，更改HTML，然后从HTML创建新的DOM。

由于表单控件的当前值未存储在HTML中，因此它会丢失，并且默认值会重新设置。

请勿为此使用innerHTML 。

使用createElement，appendChild和朋友向DOM添加新元素，而不会用它们的克隆覆盖旧元素。

答案 1 :(得分：5)

只需使用insertAdjacentHTML函数插入新的HTML，因为设置innerHTML不会保留数据并重新加载元素。

document.getElementById('adRe').addEventListener('click', function() {

  if (document.getElementById('rboxes').childElementCount < 10) {

    document.getElementById('rboxes').insertAdjacentHTML('beforeend', '<br><br><div class="rbox"><div class="rheader"><svg onclick="rclose(this)" aria-hidden="true" data-prefix="far" data-icon="window-close" class="svg-inline--fa fa-window-close fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#7D0E19" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v340zM356.5 194.6L295.1 256l61.4 61.4c4.6 4.6 4.6 12.1 0 16.8l-22.3 22.3c-4.6 4.6-12.1 4.6-16.8 0L256 295.1l-61.4 61.4c-4.6 4.6-12.1 4.6-16.8 0l-22.3-22.3c-4.6-4.6-4.6-12.1 0-16.8l61.4-61.4-61.4-61.4c-4.6-4.6-4.6-12.1 0-16.8l22.3-22.3c4.6-4.6 12.1-4.6 16.8 0l61.4 61.4 61.4-61.4c4.6-4.6 12.1-4.6 16.8 0l22.3 22.3c4.7 4.6 4.7 12.1 0 16.8z"></path></svg></div><div class="row"><div class="form-group col-sm-6"><label class="control-label">Name</label><input name="rname[]" class="form-control" required=""></div><div class="form-group col-sm-6"><label class="control-label">Relationship</label><input name="rrelationship[]" class="form-control" required=""></div></div><div class="row"><div class="form-group col-sm-5"><label class="control-label">Telephone</label><input name="rtelephone[]" class="form-control" required=""></div><div class="form-group col-sm-7"><label class="control-label">Address</label><input name="raddress[]" class="form-control" required=""></div></div></div><br><br>');
  } else {
    alert('You cannot add more than 10 relations');
  }
});

function rclose(a) {
  a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
}
.rbox .rheader svg {
  height: 39px;
  float: right;
}
<form>
  <div class="rboxes" id="rboxes">
    <div class="rbox">
      <div class="rheader">
        <svg onclick="rclose(this)" aria-hidden="true" data-prefix="far" data-icon="window-close" class="svg-inline--fa fa-window-close fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#7D0E19" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v340zM356.5 194.6L295.1 256l61.4 61.4c4.6 4.6 4.6 12.1 0 16.8l-22.3 22.3c-4.6 4.6-12.1 4.6-16.8 0L256 295.1l-61.4 61.4c-4.6 4.6-12.1 4.6-16.8 0l-22.3-22.3c-4.6-4.6-4.6-12.1 0-16.8l61.4-61.4-61.4-61.4c-4.6-4.6-4.6-12.1 0-16.8l22.3-22.3c4.6-4.6 12.1-4.6 16.8 0l61.4 61.4 61.4-61.4c4.6-4.6 12.1-4.6 16.8 0l22.3 22.3c4.7 4.6 4.7 12.1 0 16.8z"></path></svg>
      </div>
      <div class="row">
        <div class="form-group col-sm-6">
          <label class="control-label">Name</label>
          <input name="rname[]" class="form-control" required/>
        </div>
        <div class="form-group col-sm-6">
          <label class="control-label">Relationship</label>
          <input name="rrelationship[]" class="form-control" required/>
        </div>
      </div>
      <div class="row">
        <div class="form-group col-sm-5">
          <label class="control-label">Telephone</label>
          <input name="rtelephone[]" class="form-control" required/>
        </div>
        <div class="form-group col-sm-7">
          <label class="control-label">Address</label>
          <input name="raddress[]" class="form-control" required/>
        </div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <button class="btn btn-default" id="adRe">Add New Relation</button>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Create</button>
  </div>
</form>

相关问题
最新问题