Я пытаюсь создать форму заказа на продажу для программы управления запасами, которую я создаю для друга. Я создал таблицу html, которая загружает каждую строку из выпадающего элемента, используя ajax, заполняя оставшиеся ячейки из базы данных MySQL. Пользователь может добавлять строки и добавлять больше товаров в список. Существует логика c для сериализации каждого элемента строки (например, name_1, age_1, email_1, name_2, age_2, email_2 и c.)
Я использовал найденный мной учебник и переработал его для своей базы данных table (именно поэтому имена отображаются выключенными)
Теперь моя задача - взять данные из таблицы html (которую я обернул тегом формы) и вставить данные в другую таблицу в моей базе данных. Мне не удалось получить данные $ _POST для отображения на моей целевой странице (addDetails. php)
Я попытался с помощью простого оператора раскрыть значения $ _POST, но ничего не получил. Я использую ajax для извлечения полей из MySQL, а затем javascript для вставки их в таблицу html.
Это мое утверждение проверки:
<code>if ($_POST)
{
echo "<pre>" . print_r($_POST, true) . " ";} ?>
Я новичок в использовании ajax, и ввод данных из нескольких строк html - это не то, о чем я нахожу много информации. Я открыт для предложений.
<!doctype html>
<html>
<head>
<title>How to autocomplete data on multiple fields with jQuery and AJAX</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script type="text/javascript">
$(document).ready(function(){
$(document).on('keydown', '.username', function() {
var id = this.id;
var splitid = id.split('_');
var index = splitid[1];
$( '#'+id ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "getDetails.php",
type: 'post',
dataType: "json",
data: {
search: request.term,request:1
},
success: function( data ) {
response( data );
}
});
},
select: function (event, ui) {
$(this).val(ui.item.label); // display the selected text
var userid = ui.item.value; // selected id to input
// AJAX
$.ajax({
url: 'getDetails.php',
type: 'post',
data: {userid:userid,request:2},
dataType: 'json',
success:function(response){
var len = response.length;
if(len > 0){
var id = response[0]['id'];
var name = response[0]['name'];
var email = response[0]['email'];
var age = response[0]['age'];
var salary = response[0]['salary'];
document.getElementById('name_'+index).value = name;
document.getElementById('age_'+index).value = age;
document.getElementById('email_'+index).value = email;
document.getElementById('salary_'+index).value = salary;
}
}
});
return false;
}
});
});
// Add more
$('#addmore').click(function(){
// Get last id
var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
var split_id = lastname_id.split('_');
// New index
var index = Number(split_id[1]) + 1;
// Create row with input elements
var html = "<tr class='tr_input'><td><input type='text' size='65' class='username' id='username_"+index+"' placeholder='Enter Next Crop'></td><td><input type='text' size='8' class='name' id='name_"+index+"' ></td><td><input type='text' size='8' class='email' id='email_"+index+"' ></td><td><input type='text' size='8' class='salary' id='salary_"+index+"' ></td><td><input type='text' size='8' class='age' id='age_"+index+"' ></td><td><input type='text' size='8' class='qty' id='qty_"+index+"' ></td></tr>";
// Append data
$('tbody').append(html);
});
});
</script>
</head>
<body>
<div class="container">
<h3><span>Add Items to the Invoice</span></h3> <br>
<form method="POST" action="addDetails.php">
<table border='1' style='border-collapse: collapse;'>
<thead>
<tr>
<th>Crop Name</th>
<th>Crop ID</th>
<th>Product #</th>
<th>Price</th>
<th>Available</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr class='tr_input'>
<td><input type='text' size = '65' class='username' id='username_1' placeholder='Enter Crop Name'></td>
<td><input type='text' size = '8' class='name' id='name_1' ></td>
<td><input type='text' size = '8' class='email' id='email_1' ></td>
<td><input type='text' size = '8' class='salary' id='salary_1' ></td>
<td><input type='text' size = '8' class='age' id='age_1' ></td>
<td><input type='text' size = '8' class='qty' id='qty_1'></td>
</tr>
</tbody>
</table>
<br>
<input type='button' value='Add more' id='addmore'>
<br>
<br>
<input type='submit' value='Submit' id='sbmt'>
</form>
</div>
</body>
</html>
Это моя дополнительная информация. php page
<code><?php
if ($_POST)
{
echo "<pre>" . print_r($_POST, true) . " ";}?>
Проверка прохождения данных
Имя пользователя =
Id =
Имя =
Email =
Зарплата =
Возраст =
Кол-во =