I'm trying to fetch value of each textbox keyup event inside for loop.And after the series of text boxes are created, I want to call keyup event, which fetch the value entered in each text box
what i have tried
script for assigning dynamic id
<textarea type="text" name="add'+ $i +'" id="add'+ $i +'"
value="" class="form-control" onkeyup="callans()" ></textarea> <br/>
function callans() {
for( var i=0; i<8; i++)
//i<9 because that's the maximum number of text
//fields to be created is 8.
{
<textarea type="text" name="add'+ $i +'" id="add'+ $i +'"
value="" class="form-control" onkeyup="callans()" ></textarea>
var elements = document.getElementById("add'+ $i +'").value;
alert(elements);
}
}
Is there a way only create the id's dynamically and append it in the input area?
Without using ID attributes you can very easily identify elements in the DOM by inspecting the event - in your case you are interested in the keyup event and to make life easier by using a delegated event listener bound to the input elements common parent we can obtain the values like so:
(vanilla js mainly )
for( var i=0; i<8; i++){
$('#addition').append('<input class="form-control" type="text" name="add" />');
}
// delegated event listener bound to the parent container but processing only `INPUT` elements of type `text`
document.querySelector('#addition').addEventListener('keyup',function(e){
if( e.target.tagName=='INPUT' && e.target.type=='text' ){
console.log(e.target.value)
}
});<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='addition'></div>