musaspot musaspot - 2 months ago 12
JSON Question

How to make autofill input text from a select dropdown box with multiple lines?

I am trying to have a function where a user can select items they want from a drop-down box, then the price will be displayed in an input box at its side.

I am now facing problem to have the same function in multiple lines. Code are as below:

<td class="formiterate" >
<select id="Employee_ID" name="id[]">
<option value="">Select one</option>
<?php
$st = $pdo->prepare("SELECT * FROM tbl_stock");
$st->execute();
$rowes = $st->fetchAll(PDO::FETCH_ASSOC);
foreach ($rowes as $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 you can see, when you select from the
Employee_ID
, the item price will reflect in the
Last_name[]
input box.

Whilst the code works fine for a single row, I am not able to iterate the function for multiple row.

Below is my javascript:

$(function() { // This code will be executed when DOM is ready
$('#Employee_ID').change(function() { // When the value for the Employee_ID element change, this will be triggered
var $row = $(this); // We create an jQuery object with the 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")
at
var ($row)= $this
, but noting happened.

Please help.

Thanks

Answer

An example for you (hard code example):-

abc.php:-

<?php
error_reporting(E_ALL); //check all 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 as $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 as $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() { // This code will be executed when DOM is ready
    $('.Employee_ID').change(function() { // When the value for the Employee_ID element change, this will be triggered
        var data =  $(this).children(':selected').text();
        console.log(data);
        $(this).parent().next().find('.Last_name').val(data);
    });
})
</script>
</html>

Output at my end (after selection from drop-down):- http://prntscr.com/chernw

Note:- put this code to a separate file and run. then you can understand what you have to do, and then change in your code accordingly.thanks.

In your case try like this:-

$(function() { // This code will be executed when DOM is ready
    $('.Employee_ID').change(function() { // When the value for the Employee_ID element change, this will be 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);
            }
        });
    });
})