[eluser]slowgary[/eluser]
My brain is on fire. I need sleep and your JavaScript is causing John Resig to turn over in his grave, and he's still alive! ;-P It's really just the inconsistent whitespace that makes it so hard to read. You really should try to stick with uniform, tabbed indents and try to write your code like you're drawing a picture - make things lined up real nice. It helps when trying to understand the code.
What is this supposed to do?
Code:
id = (id - 1) + 2; //adds 1? id++ would be easier
Also, it looks like you're using the hidden "id" input to hold a value. I used to do that back in the day before I realized that's what variables were for. Make it a global variable if you need to access it across functions.
You said you're allowing the user to add a form field, but the field is a select element, is that really necessary? I think you could make things easier on yourself if you went back to the drawing board on your UI. Since each select element is going to offer the same options, why not have just one select element and a button that adds the selection to a list? Make sense?
It would look like this:
Code:
,-------------------------,---, ,--------,
| choose a root cause... | v | | add >> |
'-------------------------'---' '--------'
===========================================
1. root cause numero uno [remove]
2. another root cause [remove]
3. real root cause [remove]
I would do it with something like this:
Code:
< script type='text/javascript' >
//this code assumes jquery inclusion
//assures the DOM is loaded before running this code
$(document).ready(function(){
var num_causes = 0;
//binds the following code to the 'click' of our button
$('#add_cause').bind('click', function(){
//add the form field, plus a remove link, plus a container div
$('#causes').append("<div class='cause'><input type='text' disabled='disabled' name='cause_" + num_causes + "' value='" + $('#cause_select').val() + "'/><span class='remove'>[remove]</span></div>");
//increment out cause counter
num_causes++;
});
//bind the following code to all current and future elements with class 'remove'
$('.remove').live('click', function(){
//look for a parent element with class 'cause' and remove it from the DOM
$(this).parents('.cause').remove();
//decrement our cause counter
num_causes--;
});
});
< /script >
<body>
<select id='cause_select' name='cause_select'>
<option value='first'>first</option>
<option value='second'>second</option>
<option value='third'>third</option>
<option value='fourth'>fourth</option>
</select>
<button id='add_cause'>add &raquo;</button>
<form action='somescript' method='post'>
<div id='causes'>
</div>
<div>
<input type='submit' value='Add Record'/>
</div>
</form>
</body>
Throw in some CSS and you're good to go. You'd still need to figure out the validation part, but I think it's easier once you're dealing with just a bunch of text inputs. I tested this example out and it works nicely, but as I mentioned it needs to be dressed up a bit.
