如何使用 Jquery 添加/删除表单元素
Posted
技术标签:
【中文标题】如何使用 Jquery 添加/删除表单元素【英文标题】：How to use Jquery to add / remove form elements 【发布时间】：2016-09-13 13:56:52 【问题描述】：我目前正在为我的打印机制造商雇主设计/编写一个新网站。客户可以通过网站注册下载软件和手册。
我想在注册表单中添加一点专业性，并想知道是否可以使用 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 -->谢谢大家。
【问题讨论】：
请发布必要的css 和js 你现在必须显示逐步控制..
我会将表单的那一部分包装在一个 div 中，然后您可以克隆它并在单击添加另一个按钮时追加 - 我将通过一个数组而不是更改克隆的名称输入，因为您必须在删除一个时将它们全部重命名（您可能需要可选字段的默认值）。 See this for multiple value with the same name
@Pete，当然我可以做数组，无论如何处理都是用 php 编码的，所以这不是问题。我想如果也有错误，我也可以将值反刍回表单中。
【参考方案1】：
我已经制作了您正在寻找的基本版本。
-
将需要生成的div放在一个
#wrapperdiv中。
给初始 div 一个 id div0 并使用 css 隐藏它
也隐藏序列号和许可证密钥字段
根据需要（准备好文档或单击添加新系统链接），从 div0 生成一个新 div
附加事件处理程序以根据需要显示序列密钥和许可证密钥字段
显示生成的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" />【讨论】：
非常感谢您花时间创建此代码 sn-p。我自己一直在编写一些代码，并且我已经弄清楚了一些基础知识，但是却被困在将 id 编号附加到 div 上。我将在上面编辑我的帖子以显示我要去哪里。 我在上面仍然遇到的问题是，如果系统被意外添加或不再需要，则无法删除它。我还想将其限制为最多六个系统。我的设置代码限制为六个，并且删除了系统的父 div又是另一个系统。我将在上面添加我编辑的代码，看看你的想法。我必须承认它有点初级，所以希望你能看到我可以改进的地方/我出错的地方！ @BottyZ 使用删除按钮逻辑和最多允许 6 个系统编辑了答案。有什么事请告诉我 感谢您尝试修改。你的版本似乎已经比我的复杂多了！无论如何，只要添加另一个系统，就会出现删除链接吗？目前，它仅在您在刚刚添加的系统的序列号和许可证密钥框中输入值时才会出现。如果用户未在序列号和许可证框中输入任何内容，则他们无法删除附加系统。 我还假设我需要通过 javascript 而不是 php 对此表单执行输入验证，否则在提交提交期间出现错误时，所有内容都会再次隐藏，例如未在串行框。【参考方案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
【讨论】：
感谢您的意见。我正在努力看看你的将如何做我需要的？我不知道我是不是有点傻？ 上述代码将满足您的要求，确保您可以在此处查看演示ui-designer.in/aadi/profile-input-without-header。只需点击加号图标以上是关于如何使用 Jquery 添加/删除表单元素的主要内容，如果未能解决你的问题，请参考以下文章