1,105,402 Community Members

jQuery - dealing with dynamically added controls

Member Avatar
diafol
Where are my eyes?
12,977 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
1
 

Hi All,

Just to say that I've searched DW and Google extensively before posting here. Also looked at the jQuery site, but failed to find exactly what I'm looking for. Anyway here's the thing:

I have a button on a form, that when it's pressed inserts some new inputs (textboxes) to the form. Then another button should copy the contents of the first of these inputs to all the others. Now, this is tricky, js tells me that these inputs are undefined, presumably as they are added after page load. I've looked at .bind(), .delegate(), .live() and .on(), but can't see how to interact these inputs.

Here's the form:

<form id="numbers" method="post" action="anotherpage.php">
    <label for="numinputs">No. Inputs to Add: </label> <input id="numinputs" type="number" min="1" max="6" value="1" /> <button id="addinputs">Add Inputs</button><br />
    <button id="sync" style="display:none;">Sync All To First</button><br />
    <input type="submit" value="Upload" name="submit" id="submit" />
</form>

So just an input and button to send the number of textboxes to add. Here's the preliminary jQ/js:

//this just extends to allow .repeat method
String.prototype.repeat = function(num) {
    return new Array(isNaN(num)? 1 : ++num).join(this);
}
//this works - it adds the corerct number of textboxes to the form
function addInputs(){
    var str = '<label>MyNumber</label> <input class="numbertexbox" type="number" min="1" max = "20" value="7" /><br />';
    var numToAdd = parseInt($('#numinputs').val());
    $('#sync').before(str.repeat(numToAdd));
}
//this works - it calls the functions to add textboxes and shows the sync button
$('#numinputs').click(function(e){
    e.preventDefault();
    $('#sync').show();
    addInputs();        
});

//this breaks - $('.numbertextbox') is undefined 
$('#sync').click(function(e){
    e.preventDefault();
    $('.numbertextbox').val('15');
});

So, question is, how can I interact with all the newly added $('.numbertextbox') textboxes?

Member Avatar
gon1387
Posting Whiz in Training
242 posts since Jan 2011
Reputation Points: 22 [?]
Q&As Helped to Solve: 38 [?]
Skill Endorsements: 4 [?]
 
3
 

Hi diafol,
It was a typo:

function addInputs(){
    var str = '<label>MyNumber</label> <input class="numbertexbox" type="number" min="1" max = "20" value="7" /><br />';
    var numToAdd = parseInt($('#numinputs').val());
    $('#sync').before(str.repeat(numToAdd));
}

please check the class name in the input element. It has a missing 't' in 'text'.

$('#sync').click(function(e){
    e.preventDefault();
    // This one has 't'
    $('.numbertextbox').val('15');
});
Member Avatar
diafol
Where are my eyes?
12,977 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
1
 

I don't believe it! t-thanks gon1387! I've been at it for hours and for the life of me, I couldn't understand it. Serves me right - I never use class names that long - now I remember why. Big hand gon.

Question Answered as of 1 Year Ago by gon1387
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: