Generalizing jQuery dynamic add/remove form input for multiple forms

问题

Currently I have a functioning code for dynamically adding and removing form inputs on my page. I have multiple forms that I need to include on the page, so I made an event action where they could press a button and it would hide all the forms except the relevant one. This worked fine, but it created a conflict with my jQuery/javascript code because the code uses a class name to dynamically add or remove input fields. Both forms would have to be under the same class name for me to use the jQuery function as is, but that creates conflict and the function stops working. I could just write two versions of the function (one for each class), but I'm trying to find a way to generalize this, so that I don't have to have so many functions. I was thinking about doing something like this:

$('.ccinput').addClass('dinput').removeClass('ccinput');

where I would change each form's class name accordingly, so that they would be the only ones communicating with the jQuery function. This method seems to be very error prone, especially with more than 2 forms (I plan on having 4 forms total). Do you guys know of another way that I can accomplish this? Here is my html code for reference:

EDIT: I've made significant changes to the code, so here is the new version. I removed all the ID values from the form inputs and changed the jQuery function so that it does not use ID values as selectors. This removed some conflicts. And I'm now trying to use attr('class','newclass') so that the jQuery function works for both codes. It seems to work perfectly for the first form, but it refuses to function for the second. I have no idea why.

<html>

<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#table1").hide();
        $("#table2").hide();
        $("#cc_button").click(function(){
            $("#table1").show();
            $("#table2").hide();
            $("#cctable tr").attr('class', 'dinput');
            $("#dbtable tr").attr('class', 'dbinput');
        });
        $("#db_button").click(function(){
            $("#table2").show();
            $("#table1").hide();
            $("#dbtable tr").attr('class', 'dinput');
            $("#cctable tr").attr('class', 'ccinput');
        });
        $('#btnAdd').click(function() {
            var num     = $('.dinput').length; // how many "duplicatable" input fields we currently have
            var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('.dinput:last').clone();

            // insert the new element after the last "duplicatable" input field
            $('.dinput:last').after(newElem);
            $(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );

            // enable the "remove" button
            $('#btnDel').attr('disabled','');

            $(".date").mask("99/99/9999");

            // business rule: you can only add 20 names
            if (newNum == 20)
                $('#btnAdd').attr('disabled','disabled');
        });

        $('#btnDel').click(function() {
            var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
            $('.dinput:last').remove();     // remove the last element

            // enable the "add" button
            $('#btnAdd').attr('disabled','');

            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $('#btnDel').attr('disabled','disabled');
        });

        $(".date").mask("99/99/9999");
    });
</script>
</head>
<body>
<div id="tablebuttons">
<button type="button" id="cc_button">CC</button> <button type="button" id="db_button">DB</button>
</div>
<div id="table1">

<form id="ccards" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th># (last four digits)</th>
<th>Amount</th>
<th>Approval</th>
<th>Date Received</th>
</tr>
<tbody id ="cctable" >
<tr class="ccinput">
    <td> 1 </td>
    <td> <input type="text" name="cc_num[]" maxlength="4" /> </td> 
    <td> <input type="int" name="cc_amnt[]" /> </td>
    <td> <input type="text" name="cc_app[]" maxlength="10" /> </td> 
    <td> <input class="date" type="text" name="cc_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
    <input type="button" id="btnAdd" value="Add CC" />
    <input type="button" id="btnDel" value="Remove CC" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="table2">

<form id="db" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th>DB #</th>
<th>Amount</th>
<th>Date</th>
</tr>
<tbody id="dbtable">
<tr class="dbinput">
    <td> 1 </td>
    <td> <input type="text" name="db_num[]" /> </td> 
    <td> <input type="int" name="db_amnt[]" /> </td> 
    <td> <input class="date" type="text" name="db_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
    <input type="button" id="btnAdd" value="Add DB" />
    <input type="button" id="btnDel" value="Remove DB" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
</body>

</html>

回答1:

Okay, I solved it. There were multiple issues with my selectors that I had to fix, but after that the following solution works perfectly:

$("#cc_button").click(function(){
  $("#table1").show();
  $("#table2").hide();
  $("#cctable tr").attr('class', 'dinput');
  $("#dbtable tr").attr('class', 'dbinput');
});
$("#db_button").click(function(){
  $("#table2").show();
  $("#table1").hide();
  $("#dbtable tr").attr('class', 'dinput');
  $("#cctable tr").attr('class', 'ccinput');
});

This basically changes the class attribute of each table according to which button is pressed. Theoretically, this should work for 4 forms, though I have not tried it yet. This is the updated code (I've changed a lot since the first code) for those that want to see what I did:

<html>

<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#table1").hide();
        $("#table2").hide();
        $("#cc_button").click(function(){
            $("#table1").show();
            $("#table2").hide();
            $("#cctable tr").attr('class', 'dinput');
            $("#dbtable tr").attr('class', 'dbinput');
        });
        $("#db_button").click(function(){
            $("#table2").show();
            $("#table1").hide();
            $("#dbtable tr").attr('class', 'dinput');
            $("#cctable tr").attr('class', 'ccinput');
        });
        $('.btnAdd').click(function() {
            var num     = $('.dinput').length; // how many "duplicatable" input fields we currently have
            var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('.dinput:last').clone();

            // insert the new element after the last "duplicatable" input field
            $('.dinput:last').after(newElem);
            $(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );

            // enable the "remove" button
            $('.btnDel').attr('disabled','');

            $(".date").mask("99/99/9999");

            // business rule: you can only add 20 names
            if (newNum == 20)
                $('.btnAdd').attr('disabled','disabled');
        });

        $('.btnDel').click(function() {
            var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
            $('.dinput:last').remove();     // remove the last element

            // enable the "add" button
            $('.btnAdd').attr('disabled','');

            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $('.btnDel').attr('disabled','disabled');
        });

        $(".date").mask("99/99/9999");
    });
</script>
</head>
<body>
<div id="tablebuttons">
<button type="button" id="cc_button">CC</button> <button type="button" id="db_button">DB</button>
</div>
<div id="table1">

<form id="ccards" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th># (last four digits)</th>
<th>Amount</th>
<th>Approval</th>
<th>Date Received</th>
</tr>
<tbody id ="cctable" >
<tr class="ccinput">
    <td> 1 </td>
    <td> <input type="text" name="cc_num[]" maxlength="4" /> </td> 
    <td> <input type="int" name="cc_amnt[]" /> </td>
    <td> <input type="text" name="cc_app[]" maxlength="10" /> </td> 
    <td> <input class="date" type="text" name="cc_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
    <input type="button" class="btnAdd" value="Add" />
    <input type="button" class="btnDel" value="Remove" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="table2">

<form id="db" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th>DB #</th>
<th>Amount</th>
<th>Date</th>
</tr>
<tbody id="dbtable">
<tr class="dbinput">
    <td> 1 </td>
    <td> <input type="text" name="db_num[]" /> </td> 
    <td> <input type="int" name="db_amnt[]" /> </td> 
    <td> <input class="date" type="text" name="db_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
    <input type="button" class="btnAdd" value="Add" />
    <input type="button" class="btnDel" value="Remove" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
</body>

</html>

回答2:

You can use something like this.

//when the Add Field button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
  $("#items").append('<div><input type="text" name="input[]"><button  class="delete">Delete</button></div>');
});

for detailed tutorial http://voidtricks.com/jquery-add-remove-input-fields/

来源：https://stackoverflow.com/questions/11874564/generalizing-jquery-dynamic-add-remove-form-input-for-multiple-forms

标签

javascript

jquery

html

forms

dynamic