多字段引导动态表单

Posted 2023-05-09

【中文标题】多字段引导动态表单

【英文标题】：Multiple fields bootstrap dynamic form

【发布时间】：2017-09-05 01:11:52

【问题描述】：

我正在尝试在引导程序中创建一个包含多个字段的动态表单，似乎我需要在表单元素中附加一个非常长的字符串。我很确定应该有更有效的方法来做到这一点。如果您能告诉我其他方法，我将不胜感激。

表格图片

html:

<!-- start of the column with properties(form-control)-->
  <div class="col-lg-8" id="property-col">
    <div class="container">
      <form class="form">

      <div class="row">
        <h3>Properties</h3>
        <br>
      </div>

      <div class="row">
        <div class="form-group">
          <fieldset class="form-inline">
            <label class="control-label">Image Size:</label>
            <select class="form-control" id="image-size-selector">
              <option value="128">128×128</option>
              <option value="256">256×256</option>
              <option value="512">512×512</option>
              <option value="1024">1024×1024</option>
            </select>
          </fieldset>
        </div>
      </div>

      <div class="row" id="dynamic_form">
        <div class="form-group form-horizontal">
          <label>Primitives</label>
          <div class="container">
            <div class="form-inline" id="primitive_fields">
              <select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">
                <option value=" " disabled selected>primitive</option>
                <option value="sphere">sphere</option>
                <option value="triangle">triangle</option>
              </select>
              <input type="number" class="input-small form-control" id="diameter"  name="Diameter[]" step="any" placeholder="diameter(D)">
              <input type="text" class="input-small form-control"  id="sphere-position" name="SpherePosition[]"  placeholder="(x, y, z)">
              <select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]" >
                <option value=" " disabled selected>color</option>
                <option value="red">red</option>
                <option value="blue">blue</option>
                <option value="green">green</option>
                <option value="yellow">yellow</option>    
              </select> 
              <button type="button" class="btn btn-success btn-add" id="add_more"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
              </button>
            </div>
          </div>
        </div>
      </div>


      <div class="row">
        <div class="form-group">
          <fieldset class="form-inline">
            <label class="control-label">Point Light Position:</label>
            <input type="text" class="input-small form-control" id="light-position" placeholder="(x, y, z)" >
          </fieldset>
        </div>
      </div>

javascript：

function getHTMLString() 
    var complex_html = [
        '<div class="row" id="primitive-form">',
            '<div class="form-group form-horizontal">',
              '<div class="container">',
                '<div class="form-inline" id="primitive_fields">',
                  '<select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">',
                    '<option value=" " disabled selected>primitive</option>',
                    '<option value="sphere">sphere</option>',
                    '<option value="triangle">triangle</option>',
                  '</select>',
                  '<input type="number" class="input-small form-control" id="diameter"  name="Diameter[]" step="any" placeholder="diameter(D)">',
                  '<input type="text" class="input-small form-control"  id="sphere-position" name="SpherePosition[]"  placeholder="(x, y, z)">',
                  '<select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]">',
                    '<option value=" " disabled selected>color</option>',
                    '<option value="red">red</option>',
                    '<option value="blue">blue</option>',
                    '<option value="green">green</option>',
                    '<option value="yellow">yellow</option>',    
                  '</select>', 
                  '<button type="button" class="btn btn-success btn-add" id="remove_more"> <span class="glyphicon glyphicon-minus" aria-hidden="false"></span></button>',
                '</div>',
              '</div>',
            '</div>',
          '</div>',
    ].join('');
    return complex_html;

$(document).ready(function() 
    var formCount = 0;
    $('#add_more').on('click', function(e) 
        if (formCount < 4)  

            var html = getHTMLString();
            var element = $(html);

            $('#dynamic_form').append(html);
            formCount++;
         else 
            return;
        
    );


    $('#dynamic_form').on("click","#remove_more", function(e) //user click on remove text
        e.preventDefault(); $(this).parent('div').parent('div').parent('div').parent('div')[0].remove(); formCount--;

    )
);

【参考方案1】：

给你的form-inline 另一个你可以克隆的类

var formRow = $('.div_to_clone').first();
var clone = formRow.clone();

$('#dynaic_form').append(clone);