代码之家  ›  专栏  ›  技术社区  ›  Salman Saleem

字段为空

html javascript
  •  3
  • Salman Saleem  · 技术社区  · 8 年前

    这是一个简单的HTML页面,有一个表单包含一些字段,我有一个scienario,表单中可以有多个字段,这就是为什么我创建了按钮“添加新关系”当我们点击按钮时,它会将一些字段添加到表单中,但旧字段变空 这是密码 

    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 回复  |  直到 8 年前
        1
  •  7
  •   Quentin    8 年前

    += 意思是“读取这个值,更改它,然后重新分配新结果”。

    当你这样做的时候 innerHTML ,将DOM序列化为HTML,更改HTML,然后从HTML创建新的DOM。

    自从 当前值 一个表单控件没有存储在HTML中,它将丢失,并且默认值将被设置回。

    不使用 内部HTML 为了这个 .

    使用 createElement , appendChild 和朋友一起向DOM添加新元素,而不使用旧元素的克隆来覆盖旧元素。

        2
  •  5
  •   Prachi    8 年前

    只需使用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>
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    1 年前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    1 年前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    1 年前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号