javascript - How to make autofill input text from a select dropdown box with multiple lines? -
i trying have function user can select items want drop-down box, price displayed in input box @ side.
i facing problem have same function in multiple lines. code below:
<td class="formiterate" > <select id="employee_id" name="id[]"> <option value="">select one</option> <?php $st = $pdo->prepare("select * tbl_stock"); $st->execute(); $rowes = $st->fetchall(pdo::fetch_assoc); foreach ($rowes $rowe) { ?><option value="<?= $rowe ['id']; ?>"><?= $rowe ['stock_item']; ?> (<?= $rowe ['stock_brand']; ?>)</option><?php } ?> </select> </td> <td class="formiterate"><input type="text" name="last_name[]" id="last_name"></td> as can see, when select employee_id, item price reflect in last_name[] input box.
whilst code works fine single row, not able iterate function multiple row.
below javascript:
$(function() { // code executed when dom ready $('#employee_id').change(function() { // when value employee_id element change, triggered var $row = $(this); // create jquery object select inside $.post("getdata.php", { employee_id : $row.val()}, function(json) { if (json && json.status) { $('#last_name').val(json.lastname); } }) }); }) i have tried adding .closest(".rows") @ var ($row)= $this, noting happened.
please help.
thanks
an example (hard code example):-
abc.php:-
<?php error_reporting(e_all); //check type of errors ini_set('display_errors',1); $rowes = array(0=>array('id'=>1,'stock_item'=>'item1','stock_brand'=>'demo1'),1=>array('id'=>2,'stock_item'=>'item2','stock_brand'=>'demo2'),2=>array('id'=>3,'stock_item'=>'item3','stock_brand'=>'demo3')); ?> <html> <body> <table> <tr style= "float:left;width:100%"> <td class="formiterate" > <select class="employee_id" name="id[]"> <option value="">select one</option> <?php foreach ($rowes $rowe) { ?><option value="<?= $rowe ['id']; ?>"><?= $rowe ['stock_item']; ?> (<?= $rowe ['stock_brand']; ?>)</option><?php } ?> </select> </td> <td class="formiterate"><input type="text" name="last_name[]" class="last_name"></td> </tr> <tr style= "float:left;width:100%"> <td class="formiterate" > <select class="employee_id" name="id[]"> <option value="">select one</option> <?php foreach ($rowes $rowe) { ?><option value="<?= $rowe ['id']; ?>"><?= $rowe ['stock_item']; ?> (<?= $rowe ['stock_brand']; ?>)</option><?php } ?> </select> </td> <td class="formiterate"><input type="text" name="last_name[]" class="last_name"></td> </tr> </table> </body> <script src = "https://code.jquery.com/jquery-3.1.0.min.js"></script> <script> $(function() { // code executed when dom ready $('.employee_id').change(function() { // when value employee_id element change, triggered var data = $(this).children(':selected').text(); console.log(data); $(this).parent().next().find('.last_name').val(data); }); }) </script> </html> output @ end (after selection drop-down):- http://prntscr.com/chernw
note:- put code separate file , run. can understand have do, , change in code accordingly.thanks.
in case try this:-
$(function() { // code executed when dom ready $('.employee_id').change(function() { // when value employee_id element change, triggered var currentseletbox = $(this); var data = $(this).children(':selected').text(); $.post("getdata.php", { employee_id : $row.val()}, function(json) { if (json && json.status) { currentseletbox.parent().next().find('.last_name').val(json.lastname); } }); }); }) 
Comments
Post a Comment