Oops--one change:
/* create unique name & id
*/
newElem.children('input:first')
.attr('name', 'foo')
.attr('id', 'foo')
.attr('value', '');
There's no sense giving it a name & id based on num because it may
well be non-unique and that will be taken care of by
renumberQuestions() later.
On Sun, Nov 22, 2009 at 7:29 PM, brian <zijn.digi...@gmail.com> wrote:
> 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 <t...@thegridmedia.net> 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. :)
>>
>
