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>
Okay, I solved it. There were multiple issues with my selectors that I had to fix, but after that the following solution works perfectly:
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: