在引导程序窗体中单击时添加行

Adding row on click in bootstrap form

本文关键字：添加行 单击 引导程序 窗体      更新时间：2023-09-26

我的代码运行良好，但标签不在正确的位置。单击时，第一个标签不在正确位置，但其他标签在正确位置。

我哪里做错了？

<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />
<form>
    <div class="form-group">
        <label class="col-lg-3 control-label">Field:1</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="field1" />
        </div>
    </div>
    <script type="text/javascript">
    var info = 1;
    function add_fields() {
        info++;
        var objTo = document.getElementsByClassName('form-group')[0]
        var divtest = document.createElement("div");
        divtest.innerHTML = '<div class="form-group"><label class="col-lg-3     
        control-label">Field'+info+'</label><div class="col-lg-5"> <input   
        type="text" class="form-control" name="field1" /></div></div>';
        objTo.appendChild(divtest)
    }
    </script>
    <div class="form-group">
        <div class="col-lg-9 col-lg-offset-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

行被附加到错误的位置。尝试：

<div id="additionalFields"></div>

新字段所在的位置，然后更改

var objTo = document.getElementsByClassName('form-group')[0]

至

var objTo = document.getElementById('additionalFields');

这样可以纠正对齐。

问题出在bootsrap列上。

<form>
  <div class="form-group ">
   <label class="col-lg-3 control-label">Field:1</label>
    <div class="col-lg-9">
     <input type="text" class="form-control" name="field1" />
   </div>
  </div>
 <div class="form-group">
   <div class="col-lg-9 col-lg-offset-3">
   <button type="submit" class="btn btn-primary">Submit</button>
  </div>
  </div>  


    <script type="text/javascript">
         var info = 1;
    function add_fields() {
    info++;
    var objTo = document.getElementsByClassName('form-group')[0]
    console.log(objTo);
       var divtest = document.createElement("div");
     divtest.innerHTML = '<div class="form-group"><label class="col-lg-3 control-label">Field'+info+'</label><div class="col-lg-9"> <input type="text"         class="form-control" name="field1" /></div></div>';
     objTo.appendChild(divtest)
     }

你可以把它作为参考。希望能有所帮助。

相关文章：