Question

I have this input that has text and when you click it, the text dissapears but if you didnt type anything the text will come back.

<input type="button" id="btnAdd" value="Add Answer" />
<input type="text" id="forminput" class="clonedInput" onclick="this.value='';" 
onfocus="this.select()"onblur="this.value=!this.value?'Answer 1
':this.value;" value="Answer 1" />

I have a button that clones and increments my current input field using this function.

This is the function incrementing my current input field but i also need to increment the Answer #.

$('#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);

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

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

My problem is that i need to increment the text inside the new input field to make it dynamically incrementing by one each time it is cloned. Ive been baning the wall against my head for hours but i hope it isnt some easy php var. plz help me :~)

Answer 1

Here’s a fiddle which is working, and I think does what you’re attempting:

http://jsfiddle.net/R2tFz/

For posterity, here is the javascript I created:

$(function () {

$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
//clone the last field    

var newNum = num + 1; // the numeric ID of the new input field being added

    var newElem = $('#formanswer' + num).clone().attr('id', 'formanswer' + newNum);

// create the new element via clone(), and manipulate it's ID using newNum value

// manipulate the name/id values of the input inside the new element
$("input", newElem).attr('name', 'formanswer' + newNum).val('Answer ' + newNum);

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

});


    $(".clonedInput").live('blur', function () {
     var num = $(this).attr('name').replace('formanswer', '');
     $(this).val( (!$(this).val().length)?('Answer '+num):$(this).val() );
    }); 
});