1

I have my form elements here:

<li><div id="formanswer1" class="clonedInput">Answer:
<input type="text" id="formanswer1" value="" /></div></li>

<li><input type="button" id="btnAdd" value="Add Answer" /></li>
<li><input type="button" id="btnDel" value="Remove Answer" /></li>

and my jquery code here:

        $('#btnDel').attr('disabled','disabled');
        $('#btnAdd').click(function() {
        var num     = $('.clonedInput').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 = $('#formanswer' + num).clone().attr('id', 'formanswer' + newNum);
        var guianswer = $('#guianswer'+num).clone().attr('id', 'guianswer' + newNum).html('Answer '+newNum);

        // manipulate the name/id values of the input inside the new element
        newElem.children(':first').attr('id', 'formanswer' + newNum);
        guianswer.children(':first').attr('id', 'guianswer' + newNum).attr('name', 'guianswer' + newNum);

        // insert the new element after the last "duplicatable" input field
        $('#formanswer' + num).after(newElem);
        $('#guianswer' + num).after(guianswer);

        // enable the "remove" button
        $('#btnDel').attr('disabled','');

        // business rule: you can only add 5 questions
        if (newNum == 5)
            $('#btnAdd').attr('disabled','disabled');
    });

    $('#btnDel').click(function() {
        var num = $('.clonedInput').length;
        $('#formanswer' + num).remove();

        $('#guianswer'+num).remove();

        // enable the "add" button
        $('#btnAdd').attr('disabled','');

        // if only one element remains, disable the "remove" button
        if (num-1 == 1)
            $('#btnDel').attr('disabled','disabled');
    });

I have a jsfiddle here: JsFiddle.net

Basically what is happening is when i add new input using the button it copies the previous inputs value. Example: in input 1 if i enter "abc" then push add button a new input appears with value"abc" when i want a value "" blank or no value.

ANY and ALL help is much appreciated!

2
  • 1
    Warning, you have two html element with the same id (formanswer1), I think that one of them should be guianswer1 instead.
    – Nettogrof
    Feb 17, 2012 at 20:10
  • @Nettogrof good catch, OP you should fix this ID's need to be different in the dom.
    – xanderer
    Feb 17, 2012 at 20:14

1 Answer 1

3

change this line to clear the value.

      newElem.children(':first').attr('id', 'formanswer' + newNum).val('');
2
  • im embarrassed now. i was trying to change the value through the attr(). :( thx very much Feb 17, 2012 at 20:12
  • no worries just bookmark api.jquery.com always a good place to search for answers.
    – xanderer
    Feb 17, 2012 at 20:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.