从表单中添加/删除行.重置整个表单

Adding/Removing rows from a form. Resetting entire form

本文关键字:表单 添加 删除行      更新时间:2023-09-26

这三个功能都可以在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,而不是按钮的空白。