How to make autofill input text from a select dropdown box with multiple lines?
Question
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
1 answers
solution1
1 ACCPTED 2016-09-13 07:20:02
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);
}
});
});
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.