I'm building some application which is retrieving data from MySql database into a dynamically inputs using PHP & Ajax when I'm retrieving data for this input it always shown in the next one but it suppose shown in the div that I mentioned in Ajax code.
This picture will explain my problem clearly sorry for my language English is not my first language.
My html code:
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-4">
<div class="box">
<header>
<h5>تفاصيل الطلب</h5>
</header>
<div class="body">
<div class="form-group">
<label class="control-label col-lg-2">الصنف</label>
<div class="col-lg-10">
<select id="itemname" name="itemname[]" class="form-control">
<option disabled selected>اختر الصنف</option>
<?php echo getValues($pdo); ?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">السعر</label>
<div class="col-lg-10">
<input type="text" id="price" name="price[]" placeholder="-" readonly class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">الكمية</label>
<div class="col-lg-10">
<input class="form-control" type="text" name="quantity[]" id="quantity" value="0" min="1">
</div>
</div>
</div>
</div>
</div>
</div>
PHP file:
<?php
require 'DBConnection.php';
$code='';
if(isset($_POST["code"])){
$id = $_POST["code"];
$get_c = $pdo->prepare("SELECT * FROM all_menu WHERE `item_name` = '".$id."'");
$get_c->execute();
while ($row = $get_c->fetch()) {
$code .= $row['price'];
}
echo $code;
}
?>
JQuery code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#add').click(function(){
$('#append').append('<div class="form-group"><label class="control-label col-lg-4"></label><div id ="diva" class="col-lg-4"><div class="box"><header><h5>تفاصيل الطلب</h5></header><div class="body getval"><div class="form-group"><label class="control-label col-lg-2">الصنف</label><div class="col-lg-10"><select name="itemname[]" class="form-control"><option disabled selected>اختر الصنف</option><?php echo getValues($pdo); ?></select></div></div><div class="form-group"><label class="control-label col-lg-2">السعر</label><div class="col-lg-10"><input type="text" name="price[]" placeholder="-" readonly class="form-control price"></div></div><div class="form-group"><label class="control-label col-lg-2">الكمية</label><div class="col-lg-10"><input class="form-control" type="text" name="quantity[]" value="0" min="1"></div></div></div></div></div></div>');
});
$(document).on('change', '[name^=itemname]', function() {
var code = $(this).val();
$.ajax({
type: 'POST',
url: 'pages/GetPrice.php',
data:{code:code},
success: function(data){
$(this).parents('.getval').find('[name^=price]').val(data);
},
error: function (jqXHR, textStatus, errorThrown){
alert(errorThrown);
}
});
});
});
</script>