My first question here, but stackoverflow has been a highly valued resource for me the past year.
I am building an advanced form. I need the user to have the ability to add subgroups. I am using jquery (1.5.1 -- I suppose I should update.) to clone the object. My problem is I also need it to update attributes.
I was wondering if a way exists to do this that I am unable to find or if I should write this myself. It seems to be an easy task, make a count of the attributes and add one.
I have provided a terse example of some code.
<form class="clause">
<input type="radio" id="radio-1" name="radio" checked="checked" />
<label for="radio-1">And</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Or</label>
<input type="radio" id="radio-3" name="radio" />
<label for="radio-3">Not</label>
<button class="ag">Add SubGroup</button>
</form>
<!-- yes, this is in an external file -->
<script type="text/javascript">
$(function() {
$('.ag').click(function() {
$('.clause').clone(true).insertAfter($('.clause:last'));
});
</script>
This duplicates, quite nicely, the form and inserts a copy after itself.
obviously, the radio buttons attributes are not updated. So if a radio button is ticked in one sub-group it is applied to them all. I do not want this to happen.
Does a function exist for this? This is no trouble if there is none, but I am trying to not reinvent any wheels in this project.
EDIT:
To illustrate this question better I have supplied more code below. Detailing my desired results
<form class="clause">
<input type="radio" id="radio-1" name="radio" checked="checked" />
<label for="radio-1">And</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Or</label>
<input type="radio" id="radio-3" name="radio" />
<label for="radio-3">Not</label>
<button class="ag">Add SubGroup</button>
</form>
<form class="clause">
<input type="radio" id="radio-4" name="radio" checked="checked" />
<label for="radio-4">And</label>
<input type="radio" id="radio-5" name="radio" />
<label for="radio-5">Or</label>
<input type="radio" id="radio-6" name="radio" />
<label for="radio-6">Not</label>
<button class="ag">Add SubGroup</button>
</form>
<!-- yes, this is in an external file -->
<script type="text/javascript">
$(function() {
$('.ag').click(function() {
$('.clause:last').clone(true).insertAfter($('.clause:last'));
});
</script>
(note: This is a highly scaled down version of what I am attempting, and forgive me if I scaled it appropriately.)
Thanks, Matt