从表单中添加/删除行.重置整个表单
Adding/Removing rows from a form. Resetting entire form
这三个功能都可以在Chrome上运行,但不能在IE或Firefox上运行。第一个函数添加克隆行。第二个函数删除克隆行。第三个函数重置整个字段。这三个都得到了很好的评价。有没有什么明显的东西吸引到你?我很困惑。
它是否与使用ID而不是类的克隆行有关?
$(function () {
$('#btnAdd').click(function () {
var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
newElem = $('#CloneRow' + num).clone().attr({'id': 'CloneRow' + newNum}).addClass('addedRow').fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
/* This is where we manipulate the name/id values of the input inside the new, cloned element
Below are examples of what forms elements you can clone, but not the only ones.
There are 2 basic structures below: one for an H2, and one for form elements.
To make more, you can copy the one for form elements and simply update the classes for its label and input.
Keep in mind that the .val() method is what clears the element when it gets cloned. Radio and checkboxes need .val([]) instead of .val('').
*/
// Hour - select
newElem.find('.input_hr').attr('id', 'ID' + newNum + '_hour').attr('name', 'ID' + newNum + '_hour').val('0');
// Minute - select
newElem.find('.input_min').attr('id', 'ID' + newNum + '_min').attr('name', 'ID' + newNum + '_min').val('0');
// Activiy - text
newElem.find('.input_act').attr('id', 'ID' + newNum + '_act').attr('name', 'ID' + newNum + '_act').val('');
// Category - select
newElem.find('.input_cat').attr('id', 'ID' + newNum + '_cat').attr('name', 'ID' + newNum + '_cat').val('');
// Insert the new element after the last "duplicatable" input field
$('#CloneRow' + num).after(newElem);
$('#ID' + newNum + '_title').focus();
// Enable the "remove" button. This only shows once you have a duplicated section.
$('#btnDel').attr('disabled', false);
// Right now you can only add 13 sections, for a total of 15. Change '13' below to the max number of sections you want to allow.
if (newNum == 20)
$('#btnAdd').attr('disabled', true).prop('value', "That's all, folks!"); // value here updates the text in the 'add' button when the limit is reached
});
$('#btnDel').click(function () {
// Confirmation dialog box. Works on all desktop browsers and iPhone.
// if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
{
var num = $('.clonedInput').length;
// how many "duplicatable" input fields we currently have
$('#CloneRow' + num).slideUp('slow', function () {$(this).remove();
// if only one element remains, disable the "remove" button
if (num -1 === 1)
$('#btnDel').attr('disabled', true);
// enable the "add" button
$('#btnAdd').attr('disabled', false).prop('value', "add section");});
}
return false; // Removes the last section you added
});
// Enable the "add" button
$('#btnAdd').attr('disabled', false);
// Disable the "remove" button
$('#btnDel').attr('disabled', true);
// Reset the entire form
$('#btnRes').click( function () {
{
// Confirmation dialog box. Works on all desktop browsers and iPhone.
if (confirm("Do you really want to reset the form? All data will be lost."))
{
document.getElementById("BudgetFormEng").reset();
$('.addedRow').remove();
$('#output').empty();
};
return false;
};});
我没有收到来自IE或Firefox的任何错误。
这个问题的答案是我是一个白痴。在我的html我有<button><span id="btnRes/btnAdd/btnDel"></span></button>
。代码是工作的,但是你必须直接点击象形符号的span,而不是按钮的空白。
相关文章:
- jQuery表单添加不适用于下拉列表
- 如何在javascript转换编码中将一个动态值从一个表单添加到另一个页面
- 根据下拉选择向表单添加和删除输入标记
- 向表单添加滚动功能
- 如何根据用户输入的数字动态地向表单添加文本字段
- 在firefox中,在向表单添加onsubmit属性后,不会提交表单
- 在rails中选择向表单添加文本字段的最佳方式
- 使用 HTML 按钮向输入和提交表单添加文本
- 如何在 PHP 中向此联系表单添加验证
- 使用 Ajax 和 PHP 在外部 XML 文件中从 HTML 表单添加新数据
- 按钮从外部表单添加选定=“选定”
- 使用 Javascript 将详细的输入表单添加到测验结果中
- jQuery 移动表单:添加的字段没有样式
- 向动态表单添加验证
- 在Meteor TODO应用程序中向表单添加另一个字段
- 我可以通过Javascript向表单添加参数吗
- 向表单添加多个字段
- 如何在Javascript中向表单添加隐藏的ID列表
- 向PHP表单添加更多字段(用户可以添加多个地址)
- 向表单添加动态字段