mysql — php ajax, как отображать динамические значения в динамических полях выбора
я ищу помощь
Я взял код добавления нескольких строк в начальной загрузке, в котором я пытаюсь получить значения из полей выбора, используя php внутри javascript, используя ajax, он получает значение из базы данных, он отлично работает для первой строки, но когда он касается нескольких строк, он просто получает значение и снова добавляет к первой строке, что мне нужно, чтобы получить значение в той же строке, откуда он был выбран здесь код
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="au theme template">
<meta name="author" content="Hau Nguyen">
<meta name="keywords" content="au theme template">
<!-- Title Page-->
<title>Dashboard 3</title>
<!-- Fontfaces CSS-->
<link href="css/font-face.css" rel="stylesheet" media="all">
<link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
<link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Bootstrap CSS-->
<link href="vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">
<!-- Vendor CSS-->
<link href="vendor/animsition/animsition.min.css" rel="stylesheet" media="all">
<link href="vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
<link href="vendor/wow/animate.css" rel="stylesheet" media="all">
<link href="vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
<link href="vendor/slick/slick.css" rel="stylesheet" media="all">
<link href="vendor/select2/select2.min.css" rel="stylesheet" media="all">
<link href="vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
<!-- Main CSS-->
<link href="css/theme.css" rel="stylesheet" media="all">
</head>
<?php
$connection = mysqli_connect('localhost','root','','quotation');
?>
<?php
if(isset($_POST['submit']))
{
$name = $_POST['name'];
$mail = $_POST['mail'];
$phone = $_POST['phone'];
$name1 = count($_POST['name']);
$mail1 = count($_POST['mail']);
$phone1 = count($_POST['phone']);
print_r($name);
echo "<br>";
print_r($mail);
echo "<br>";
print_r($phone);
echo "<br>";
echo $name1;
echo $mail1;
echo $phone1;
}
?>
<br>
<div class="container">
<div class="row">
<div class="col col-sm6">
<a href="#">
<img src="https://web-answers.ru/wp-content/uploads/2019/02/icon/Omni_logo_for_web2.png" alt="CoolAdmin" />
<p style="color:gray;"><i>Transforming People and Business</i></p>
</a>
<p>
A-242, Sardar Ali Sabri Rd. <br>
Block-2, Gulshan-e-Iqbal <br>
Karachi. <br>
Phone: 021-3498OMNI(6664) Mobile: 0312-2169325, 0337-7222191
<br> SNTN : S0529023-6
<br>
TaxpayerName : OMNI ACADEMY
</p>
</div>
<div class="col col-sm6">
<h2 style="color:gray">Quotations</h2>
<p>
DATE 2018-12-17
<br>
RFQ# 0308-2018
<br>
Karachi. <br>
Phone: 021-3498OMNI(6664) Mobile: 0312-2169325, 0337-7222191
<br> SNTN : S0529023-6
Customer ID 408
<br>
Customer NTN/SNTN NA
<br>
<br>
Customer Lakson Group
<br>
Valid until: 28-Nov-2018
<br>
Prepared by: FIN-03
</p>
</div>
</div>
</div>
<br>
<form method="post">
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
</div>
<input type="submit" name = 'submit' value="Subm">
</form>
<script>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select onchange = "myfunc(this.value)" name="name[]" class="form-control" ' + counter + '" ><?php $select_courses = "select * from courses";
$run_select = mysqli_query($connection,$select_courses);
while($row = mysqli_fetch_assoc($run_select)){
$name = $row["name"];
$course_id = $row["course_id"];
?><option value="<?php echo $course_id ?>"><?php echo $name; ?></option> <?php } ?></select></td>';
cols += '<td id="getdata" ' + counter + '"></td>';
cols += '<td><input type="text" class="form-control" name="phone[]' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
function myfunc(datavalue)
{
$.ajax({
url:'getdata.php',
type:'post',
data:{
datapost:datavalue
},
success:function(result){
$('#getdata').html(result);
}
});
}
</script>
<?php include('include/footer.php'); ?>
<!-- end document-->
getdata.php
<?php
$connection = mysqli_connect('localhost','root','','quotation');
?>
<?php
$name_id = $_POST['datapost'];
$q = "select * from courses where course_id = '$name_id'";
$result = mysqli_query($connection,$q);
$rows = mysqli_fetch_assoc($result);
?>
<input type="text" name = "phone[]" value="<?php echo $rows['name']; ?>">
Решение
Вы можете сделать следующее:
Установите уникальный идентификатор для вашего select а также getdata,
<select id="select'+counter+'">
<td id="getdata'+counter+'"></td>
Вы можете вызвать функцию изменения select отдельно или передать идентификатор myfunc и разобрать его оттуда.
$(document).on('change', 'select[name="name[]"]', function(){
idName = $(this).attr('id'); //finding id of the element
id = idName.substring(6, idName.length); //finding id number
var datavalue = $(this).val();
myfunc(datavalue, id);
});
Измени свой myfunc следующее.
function myfunc(datavalue, id) {
$.ajax({
url:'getdata.php',
type:'post',
data:{
datapost:datavalue
},
success:function(result){
$('#getdata'+id).html(result);
}
});
}
А также вы должны быть осторожны при сохранении уникальных идентификаторов при удалении строк. Ты можешь проверить Вот как динамически добавлять и удалять строки.
Другие решения
Других решений пока нет …
detector