如何使用 Jquery 添加/删除表单元素

Question

我目前正在为我的打印机制造商雇主设计/编写一个新网站。客户可以通过网站注册下载软件和手册。

我想在注册表单中添加一点专业性，并想知道是否可以使用 jQuery。注意：我的 jQuery 知识非常有限，但我正在努力改进它！

我在页面中链接了 jquery、jquery easing 和 ui。

我希望处理的表单部分如下所示：

客户通常拥有 1 到 6 个系统，所有系统都有自己的序列号，可能还有许可证密钥。我最初只想显示选择系统选择框，然后一旦做出选择就显示序列号框。然后，一旦这也被填写，然后显示许可证密钥框和“添加另一个系统”按钮。

然后，如果客户有另一个系统，他们可以单击该按钮，它将添加第一个系统的克隆（即，在显示其他框和另一个添加系统按钮之前，添加一个要填写的新选择系统框）。唯一的例外是它可能需要一个删除按钮，以防客户点击添加太多次。 This new remove button could then be hidden when another system is selected.

类似这样：

我想将其限制为仅允许 6 组系统详细信息。每次在字段名称上修改一个数字。

当前html5的这一部分是这样的：

在底部忽略此现已更新的代码 (18/5/16)

<hr class="line">
<div class="eleven columns top-2 bottom-2">
  <h3 class="title bottom-2">System Details</h3>
  <div class="form-box">
    <label>System <small>*</small>
    </label>
    <select name="system">
      <option>Select system</option>
      <option value="CPM-200">CPM-200</option>
      <option value="CPM-100">CPM-100</option>
      <option value="CPM-100H">CPM-100H</option>
      <option value="CJ Pro">CJ Pro</option>
      <option value="CJ-200C">CJ-200C</option>
      <option value="CM-200">CM-200</option>
    </select>
  </div>
  <div class="form-box">
    <label>Serial Number <small>*</small>
    </label>
    <input type="text" name="serial1" class="text" required>
  </div>
  <!-- End Box -->
  <div class="form-box">
    <label>License Key (if known)</label>
    <input type="text" name="license1" class="text" placeholder="e.g. ABCD1-EFGH2-IJKL3-MNOP4-QRST5" value="<?php echo htmlentities(strip_tags($company)); ?>">
  </div>
  <!-- End Box -->
  <div class="form-box">
    <a href="#" class="button medium secondary" style="margin-top: 35px; padding: 14px 30px;">Add Another System?</a>
  </div>
  <!-- End Box -->
</div>
<div class="clearfix"></div>
<input type="submit" value="Register" class="button medium color" />

如您所见，它相当复杂，而且问题很大！而且我不在我的联盟中，因此非常感谢一些友好的指点。

谢谢。

---

编辑 18/5

请原谅我的基本 jquery 代码，就像我说我不是专家一样，但希望你们都可以提出一些改进建议。目前，我使用 javascript 将 html 作为附加到包装器中添加，因为这允许我删除系统。

到目前为止，我已经设法弄清楚如何为每个系统添加 div，给它们 id，总共只允许 6 个。如果系统被删除，我也可以删除它们。

我不能做的是：

在第一个 id 上显示更多的序列框（因为我不知道如何修复名称后带有数字 x 的 id - 即 system5 以显示 serial5 框。想法？

如果客户删除了一个盒子，然后添加了一个新盒子，我如何使新盒子具有最低的可用 ID 号。即如果客户拥有所有六个系统，然后删除数字 4，如果他们想再次添加另一个系统，我如何让它找到那个 4 并添加一个新的系统 4？

目前的代码：

// Registration form element show / hide function
$(document).ready(function() {
  var max_systems = 6; // maximum input boxes allowed
  var wrapper	 = $(".system-wrap"); // Fields wrapper
  var add_button = $(".system-button"); // Add button ID

  var x = 1; // initial systems count
  $(add_button).click(function(e){ // on add button click
    e.preventDefault();
    if(x < max_systems){ // max systems allowed
      x++; // system increment
      $(wrapper).append("<div class='system-wrap top-2 bottom-2'>" + "\n" + "<hr class='line bottom-2'>" + "\n" + "<div class='form-box'>" + "\n" + "<label>System <small>*</small></label>" + "\n" + "<select name='system" + x + "'>" + "\n" + "<option value=''>Select system</option>" + "\n" + "<option value='CPM-200'>CPM-200</option>" + "\n" + "<option value='CPM-100'>CPM-100</option>" + "\n" + "<option value='CPM-100H'>CPM-100H</option>" + "\n" + "<option value='CJ Pro'>CJ Pro</option>" + "\n" + "<option value='CJ-200C'>CJ-200C</option>" + "\n" + "<option value='CM-200'>CM-200</option>" + "\n" + "</select>" + "\n" + "</div>" + "\n\n" + "<div class='form-box' id='serial" + x + "'>" + "\n" + "<label>Serial Number <small>*</small></label>" + "\n" + "<input type='text' name='serial" + x + "' id='serialbox" + x + "' class='text' placeholder='e.g. 01234567L or CJP01-1234' value='' required>" + "\n" + "</div><!-- End Box -->" + "\n\n" + "<div class='form-box' id='license" + x + "'>" + "\n" + "<label>License Key (if known)</label>" + "\n" + "<input type='text' name='license" + x + "' class='text' placeholder='e.g. ABCD1-EFGH2-IJKL3-MNOP4-QRST5' value=''>" + "\n" + "</div><!-- End Box -->" + "\n" + "<div class='form-box remove-field'>" + "\n" + "<a href='#' class='button medium secondary' style='margin-top: 38px; padding: 14px 30px;'>Remove?</a>" + "\n" + "</div><!-- End Box -->" + "\n" + "</div>" + "\n\n" + "<div class='clearfix'></div>" + "\n"); // add remove button
    }
  });

  $(wrapper).on("click",".remove-field", function(e){ // user click on remove text
    e.preventDefault(); $(this).parent(".sys").remove(); x--;
  })
});

$('#system').on('change',function(){
  if ($(this).val() != "")	 {
    $('#serial').show();
  } else {
    $('#serial').hide();
  }
} );

$('#serialbox').on("keyup", function(){
  if ($(this).val().length > 0)	 {
    $('#license').show();
  } else {
    $('#license').hide();
  }
} );

#serial, #license {
  display: none;
}

<div class="eleven columns top-2 bottom-2 system-details">
  <h3 class="title bottom-2">System Details</h3>
  <p>You may register up to 6 different Lighthouse products below.</p>
  <div class="systems top-2">

    <div class="system-wrap">
      <div class="form-box">
        <label>System <small>*</small></label>
          <select name="system" id="system">
            <option value="">Select system</option>
            <option value="CPM-200">CPM-200</option>
            <option value="CPM-100">CPM-100</option>
            <option value="CPM-100H">CPM-100H</option>
            <option value="CJ Pro">CJ Pro</option>
            <option value="CJ-200C">CJ-200C</option>
            <option value="CM-200">CM-200</option>
          </select>
        </div>

        <div class="form-box" id="serial">
          <label>Serial Number <small>*</small></label>
          <input type="text" name="serial" id="serialbox" class="text" placeholder="e.g. 01234567L or CJP01-1234" value="" required>
        </div><!-- End Box -->

        <div class="form-box" id="license">
          <label>License Key (if known)</label>
          <input type="text" name="license" class="text" placeholder="e.g. ABCD1-EFGH2-IJKL3-MNOP4-QRST5" value="">
        </div><!-- End Box -->

        <div class="clearfix"></div>

      </div><!-- End System Wrap -->
    </div><!-- End Systems -->

谢谢大家。

Answer 1

我已经制作了您正在寻找的基本版本。

1. 将需要生成的div放在一个#wrapperdiv中。
2. 给初始 div 一个 id div0 并使用 css 隐藏它
3. 也隐藏序列号和许可证密钥字段
4. 根据需要（准备好文档或单击添加新系统链接），从 div0 生成一个新 div
5. 附加事件处理程序以根据需要显示序列密钥和许可证密钥字段
6. 显示生成的div

$(document).ready(function() {
  var max_divs = 11;
  var divs_present = 0;

  $("#add-another").click(function(e) {
    //prevent scroll
    e.preventDefault();

    //generate a new div based on div0 and attach the event handlers

    //console.log($("#wrapper :last-child"));
    //get the last generated div
    var last_div = $("div[id^='div']:last");

    //slice off the number at the end of the last div id for example 0 from div0
   
    //var last_div_id_num = last_div.attr("id").slice(-1);
    var last_div_id_num = parseInt(last_div.attr("id").replace( /^\D+/g, '')); 

    //console.log($("#wrapper :last-child").attr("id"));
    //add one to the old id number and prefix div to get the id of the new div
    var new_id_num = (parseInt(last_div_id_num) + 1);
    var new_div_id = "div" + new_id_num;

    //clone div0
    var new_div = $("#div0").clone();

    //new_div.show();
    //change the id of the new div as calculated above
    new_div.attr("id", new_div_id);

    //find the system dropdown inside the new div etc
    var new_system = new_div.find(".system");
    var new_serial_div = new_div.find(".serial-div");
    var new_serial = new_div.find(".serial");
    var new_licensekey_div = new_div.find(".licensekey-div");
    var new_licensekey = new_div.find(".licensekey");
    var remove_btn_div = new_div.find(".remove-btn-div");
    var remove_btn = new_div.find(".remove-btn");

    //attach event handler: once system is selected, show the serial number field
    new_system.on("change", function() {
      console.log(new_div.find(".system :selected").text().length);
      if(new_div.find(".system :selected").text().trim() == "Select system"){
        //console.log("Compared");
        new_serial.val("");
        new_serial_div.hide();
        new_licensekey.val("");
        new_licensekey_div.hide();
      }else{
        new_serial_div.show(); 
      }
      //console.log("Im here!");
    });


    //attach event handler: once something is entered in the serial number field, show the next field
    new_serial.on("keyup", function() {
      //Please add validation as required here
      //console.log("Im here too!");
      if (new_serial.val().length > 0) {
        new_licensekey_div.show();
      }else{
        new_licensekey.val("");
        new_licensekey_div.hide();  
          
      }
    });
    
    new_serial.on("change", function(){
      if(new_serial.val().length == 0){
        new_licensekey.val("");        
        new_licensekey_div.hide();  
      }
    });
    
    /*new_licensekey.on("keyup", function(){
      if(new_licensekey.val().length > 0){
        remove_btn_div.show();  
      }
    });*/

    remove_btn.on("click", function(e){
      //prevent scroll
      e.preventDefault();
      --divs_present;
      new_div.remove();
      if(divs_present<max_divs){
        $("#add-another").show();  
      }
    });
    
    
    //append the new div to the wrapper div
    $("#wrapper").append(new_div);
    //finally, show the new div
    new_div.show();
    
    ++divs_present;
    
    //show the remove button
    if(divs_present>1){
      remove_btn_div.show(); 
    }
    
    if(divs_present==max_divs){
      $("#add-another").hide();  
    }

  });

  //trigger a click to generate the first div
  $("#add-another").trigger('click');
  //$("#system1").trigger('change');

});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- begin snippet: js hide: false -->
<hr class="line">
<div>
  <h3>System Details</h3>
  <div id="wrapper">
    <div id="div0" class="hidden">
      <div>
        <label>System <small>*</small>
        </label>
        <select name="system" class="system">
          <option>Select system</option>
          <option value="CPM-200">CPM-200</option>
          <option value="CPM-100">CPM-100</option>
          <option value="CPM-100H">CPM-100H</option>
          <option value="CJ Pro">CJ Pro</option>
          <option value="CJ-200C">CJ-200C</option>
          <option value="CM-200">CM-200</option>
        </select>
      </div>
      <div class="serial-div hidden">
        <label>Serial Number <small>*</small>
        </label>
        <input type="text" name="serial1" class="serial" required>
      </div>
      <!-- End Box -->
      <div class="licensekey-div hidden">
        <label>License Key (if known)</label>
        <input type="text" name="license1" class="licensekey" placeholder="e.g. ABCD1-EFGH2-IJKL3-MNOP4-QRST5" value="">
      </div>
      <!-- End Box -->
      <div class="remove-btn-div hidden">
        <a href="#" class="remove-btn">Remove</a>
      </div>
    </div>
  </div>
  <div>
    <a href="#" id="add-another">Add Another System?</a>
  </div>
</div>
<!-- End Box -->
<div class="clearfix"></div>
<input type="submit" value="Register" class="button medium color" />

Answer 2

您可以按照以下步骤操作。
1）您必须进行克隆。
2）那么如果你想删除任何项目，那么你必须代表jquery中的$（this）删除。

HTML 部分

                    <div class="row">
                       <div class="col-sm-12 key_expertise">
                          <div class="mdl-textfield mdl-js-textfield">
                             <input class=mdl-textfield__input name="profileExperience" id="" placeholder="Key Expertise">
                          </div>
                          <div class="mdl-textfield mdl-js-textfield">
                             <input class=mdl-textfield__input name="experienceYear" id="" placeholder="Key Expertise">
                          </div>
                          <div class="mdl-textfield mdl-js-textfield marginRight_none">
                             <input class=mdl-textfield__input name="experienceYear" id="" placeholder="Key Expertise">
                          </div>
                       </div>
                    </div>

                    <div class="row">
                       <div class="col-sm-12 input_add_delete first">
                          <div class="mdl-textfield mdl-js-textfield">
                             <input class=mdl-textfield__input name="profileExperience" id="" placeholder="Experience">

                          </div>

                             <div class="mdl-textfield mdl-js-textfield">
                                <input class=mdl-textfield__input name="experienceYear" id="" placeholder="Year">
                             </div>


                             <div class="mdl-textfield mdl-js-textfield">
                                <input class=mdl-textfield__input name="experienceTitle" id="" placeholder="Title">
                             </div>

                             <div class="mdl-textfield mdl-js-textfield">
                                <input class=mdl-textfield__input name="experienceCountry" id="" placeholder="Country">
                             </div>

                           <div class="add_input">
                             <a href="javascript:void(0);"> Add  <i class="zmdi zmdi-plus-circle zmdi-hc-fw"></i></a>
                          </div>
                          <div class="delete_input">
                             <a href="javascript:void(0);">Delete<i class="zmdi zmdi-minus-circle zmdi-hc-fw"></i></a>
                          </div>
                       </div>




                    </div>

                    <div class="row">
                    <div class="col-sm-12">
              <div class="text-right">
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect btn-highlight btn-default btn-submit" data-upgraded=",MaterialButton,MaterialRipple">Save  <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
              </div>
            </div>
            </div>  

JQuery

$('.add_input').click(function(){
                 $(this).parents('.input_add_delete').clone(true, true).removeClass('first').insertAfter($(this).parents('.input_add_delete')).find("input").val("").siblings('label').remove(); 

              });                 

              $('.input_add_delete input').focus(function(){
                 $(this).parent('.mdl-textfield').addClass('is-dirty'); 
              });

              $('.delete_input').click(function(){
                 $(this).parents('.input_add_delete').remove();                        
              });

见Demo