It looks the problem stems from non-unique IDs for your cloned
elements. So, the first thing to do is to get rid of those and use an
indexing method.
<form name="create" method="post" action="create.php">
<input type="hidden" id="id" value="1">
<label for="title">Title</label>
<input name="myusername" type="text" id="myusername"><br /><br />
<div class="Question">
Question: <input type="text" name="question_0" id="question_0"
/>
<input type="button" class="btnDel" value="Remove question" />
</div>
<div>
<input type="button" id="btnAdd" value="Add another question" />
</div>
<input type="submit" name="submit" value="Create survey">
</form>
$(function()
{
var num = $('.Question').size();
if (num == 1) $('.btnDel:first').attr('disabled', 'disabled');
/* ADD BUTTON
*/
$('#btnAdd').click(function()
{
/* clone 1st Question div
*/
var newElem = $('.Question:first').clone();
/* create unique name & id and remove value, if any
*/
newElem.children('input:first')
.attr('name', 'question_' + (num - 1))
.attr('id', 'question_' + (num - 1))
.attr('value', '');
/* place at end of list
*/
$('.Question:last').after(newElem);
$('.btnDel').each(function() { $(this).attr('disabled','') });
/* limit number of available questions
*/
if (++num == 4) $('#btnAdd').attr('disabled', 'disabled');
renumberQuestions();
});
/* DELETE BUTTON
*/
$('.btnDel').live('click', function()
{
if (num > 1)
{
$(this).parent('div').remove();
/* re-enable add button if necessary
*/
$('#btnAdd').attr('disabled', '');
/* decrement element count and disable delete button if
* just 1 remaining
*/
if (--num == 1)
{
$('.btnDel').each(function() {
$(this).attr('disabled','disabled') });
}
renumberQuestions();
}
});
/**
* Adjust id & name of question inputs.
* Because questions may be removed in any order
* adding a new one is not guaranteed to have a unique index.
*/
function renumberQuestions()
{
$('.Question').each(function(i)
{
$(this).children('input:first')
.attr('name', 'question_' + i)
.attr('id', 'question_' + i)
});
}
});
Note the use of the live() function for the individual delete buttons.
This is because they may be added to the DOM dynamically.
The renumberQuestions() function is the best i can come up with off
the top of my head (and with dinner needing to be cooked). There's
probably a more efficient solution.
On Thu, Nov 19, 2009 at 4:37 PM, tomh88 <[email protected]> wrote:
> Hi,
>
> I have two issues the following script.
>
> 1. The delete button will only delete the first form element. The rest
> of the delete buttons do nothing.
> 2. The add button adds a new element after the first one. I need it to
> add it at the end of the list (i.e. always last).
>
> The jquery is:
>
> //Add a new question
>
> $(document).ready(function() {
> var num = $('.clonedInput').size();
>
> if (num == 1)
> $('.btnDel').attr('disabled','disabled');
>
> //ADD BUTTON
> $('#btnAdd').click(function() {
> var num = $('.clonedInput').size();
>
> var newElem = $('#input').clone();
>
> newElem.children(':first');
> $('#input').after(newElem);
>
> $('.btnDel').attr('disabled','');
>
> //set number of available questions
> if (num == 4)
> $('#btnAdd').attr('disabled','disabled');
> });
>
> //DELETE BUTTON
>
> $(".btnDel").click(function(){
> $(this).closest("div").remove()
> })
> $('.btnDel').attr('disabled','');
>
> });
>
> });
>
> And my markup is:
>
> <form name="create" method="post" action="create.php">
>
> <input type="hidden" id="id" value="1">
>
> <label for="title">Title</label>
> <input name="myusername" type="text" id="myusername"><br /
>><br />
> <div id="input" class="clonedInput">
> Question: <input type="text" name="question"
> id="question" />
> <input type="button" class="btnDel" value="Remove
> question" />
> </div>
> <div>
> <input type="button" id="btnAdd" value="Add another
> question" />
> </div>
> <input type="submit" name="submit" value="Create survey">
>
> </form>
>
> Any help very much appreciated - I'm assuming the problems are
> related. :)
>
