I want to assign the one textbox value into another textbox in javascript in dynamic creation of textbox

Question

 var room = 1; function add_fields() { room=$('#row_count').val()-1; room++; var objTo = document.getElementById('education_fields'); var divtest = document.createElement("div"); divtest.setAttribute("class", "form-group removeclass"+room); var rdiv = 'removeclass'+room; divtest.innerHTML = '<div class="col-sm-5 nopadding"><div class="form-group"> <input type="text" class="form-control display_name" onkeyup="copy_data(this)" id="display_name'+room+'" name="display_name'+room+'" value="" placeholder="Display name" required /></div></div><div class="col-sm-5 nopadding"><div class="form-group"> <input type="text" class="form-control" id="db_value'+room+'" name="db_value'+room+'" value="" placeholder="Value" required /><input type="hidden" class="form-control" id="def_value'+room+'" name="def_value'+room+'" value="" /></div></div><div class="col-sm-2 nopadding"><div class="input-group-btn"> <a href="javascript:;" class="btn " type="button" onclick="remove_fields('+ room +');" title="Remove Rows"> <i class="fa fa-minus text-danger" ></i> </a></div></div></div><div class="clear"></div>'; $('#row_count').val(room); $('#pre_count').val(parseFloat($('#pre_count').val())+1); objTo.appendChild(divtest) }

 <div class="controls" id="profs"> <form class="input-append" method="post" action="<?=base_url()?>dform/update_asset_options"> <center> <div class="col-sm-5 nopadding"> <label>Display Name</label> </div> <div class="col-sm-5 nopadding"> <label>Database Value</label> </div> </center> <input type="text" name="rowVal" id="rowVal" value="" /> <input type="text" name="row_count" id="row_count" value="<?=$opt_count?>" /> <input type="text" name="pre_count" id="pre_count" value="<?=$opt_count?>" /> <? //print_r($arr);die; $i=0; foreach($arr as $k=>$v) { $opt_value=explode(',',$v); //print_r($opt_value[1]);die; $display_name=$opt_value[1]; $db_val=$opt_value[2]; if($i>0) { $remClass="removeclass".$i; } else { $remClass=""; } ?> <div class="row <?=$remClass?>" > <div class="col-sm-5 nopadding"> <div class="form-group"> <input type="text" class="form-control display_name" id="display_name<?=$i?>" name="display_name<?=$i?>" value="<?=$display_name?>" placeholder="Display Name1" required > </div> </div> <div class="col-sm-5 nopadding"> <div class="form-group "> <input type="text" class="form-control" id="db_value<?=$i?>" name="db_value<?=$i?>" value="<?=$db_val?>" placeholder="Value" required /> <input type="hidden" class="form-control" id="def_value<?=$i?>" name="def_value<?=$i?>" value="" /> </div> </div> <? if($i>0) {?> <div class="col-sm-2 nopadding"> <div class="input-group-btn"> <a href="javascript:;" class="btn " type="button" onclick="remove_fields(<?=$i?>);" title="Remove Rows"> <i class="fa fa-minus text-danger" ></i> </a> </div> </div> <? } echo "</div>"; $i++; } ?> <div id="education_fields"></div> <div class="clear"></div> <div class="col-sm-12 nopadding"> <div class="input-group-btn"> <a href="javascript:;" class="btn " type="button" onclick="add_fields();"title="Add Rows"> <i class="fa fa-plus"></i> </a> </div> </div> <center> <button class="btn btn-md btn-success" type="submit" >Save</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </center> </form> </div>

Here i have some code to create dynamic text box using add_fields(), in that i called dspname() function for assigning one text box value to another but it's not assigning to another, if i enter the name in the first textbox, the text is not copying to another textbox, how to resolve this issue can any one please help me..

Answer 1

use find() to get or set value in dynamic element. like:

var val1=$('#profs').find('#display_name1').val();
$('#profs').find('#display_name2').val(val1);