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

时间：2016-05-17 12:43:52

标签： jquery html5 forms dynamic

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

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

我有jquery，jquery easing和ui都链接在页面中。

我希望插入的表单部分如下：

html5 form

客户通常有1到1之间的任何地方。 6个系统，都有自己的序列号和可能的许可证密钥。我最初只想显示选择系统选择框，然后在选择完成后显示序列号框。然后，一旦填写完毕，然后显示许可证密钥框并添加另一个系统＆＃39;按钮。

然后，如果客户有另一个系统，他们可以单击该按钮，它将添加第一个的克隆（即添加一个新的选择系统框以填入，然后显示其他框和另一个添加系统按钮）。唯一的例外是，它可能需要一个删除按钮，以防客户点击添加太多次。然后，当选择另一个系统时，可以隐藏这个新的删除按钮。

所以这样：

jquery dynamic changes

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

当前html5的这一部分如下所示：

忽略现在的更新代码（16/5/16）

＆＃13;
＆＃13; 
<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" />
＆＃13;
＆＃13;
＆＃13;

正如你所看到的，它非常复杂而且很大！而且我不在联盟中，所以一些友好的指针会非常感激。

谢谢。

编辑18/5

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

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

我无法做到的是：

更多地显示第一个ID的串行框（因为我不知道如何在名称后面修改一个带有数字x的id - 即system5来显示serial5框。想法？

如果客户删除了一个框，然后添加了一个新框，我该如何使新的框具有可用的最低ID编号。即如果客户拥有所有六个系统，则删除第4个，如果他们想再次添加另一个系统，我如何才能找到它并添加一个新系统4？

目前的代码：

＆＃13;
＆＃13; 
// 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();
  }
} );
＆＃13; 
#serial, #license {
  display: none;
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

谢谢大家。

2 个答案:

答案 0 :(得分：1)

我已经找到了你正在寻找的基本版本。

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

    7. $(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" />

答案 1 :(得分：0)

您可以按照以下步骤操作 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

相关问题
最新问题