Я создаю форму списка покупок с динамическими ячейками таблицы.Все отлично работает, он подчиняется базе данных и все.Но он представляет каждый элемент в виде отдельной записи в базе данных.Я хочу, чтобы он отправлял все записи из этого сеанса в виде одной записи, разделенной запятыми, которую я могу затем извлечь на основе даты (пока я не добавил это в код. Я просто пытаюсь получить данные, отправленные правильнопервый).Итак, прямо сейчас, если я создаю список в разделе «продукты» с «яблоками, бананами, вишнями», он представляет каждый из них как отдельные строки в базе данных, когда я хочу, чтобы каждый из них был представлен в одной строке..
Вот мой код для страницы ввода:
<title>PHP - Dynamically Add or Remove input fields using JQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 align="center">PHP - Dynamically Add or Remove input fields using JQuery</h2>
<div class="form-group">
<form name="add_list" id="add_list">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td colspan="2">PRODUCE</td>
</tr>
<tr>
<td>
<input type="text" name="produce[]" placeholder="Enter Item Name" class="form-control produce_list" required="" />
</td>
<td>
<button type="button" name="addproduce" id="addproduce" class="btn btn-success">Add More</button>
</td>
</tr>
</table>
<table class="table table-bordered dairy" id="dynamic_field2">
<tr>
<td colspan="2">DAIRY</td>
</tr>
<tr>
<td>
<input type="text" name="dairy[]" placeholder="Enter Item Name" class="form-control dairy_list" required="" />
</td>
<td>
<button type="button" name="adddairy" id="adddairy" class="btn btn-success">Add More</button>
</td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var postURL = "http://www.path.com/shopping/runmore.php";
var i=1;
$('#addproduce').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" name="produce[]" placeholder="Enter item name" class="form-control produce_list" required /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$('#adddairy').click(function(){
i++;
$('#dynamic_field2').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" name="dairy[]" placeholder="Enter item name" class="form-control dairy_list" required /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:postURL,
method:"POST",
data:$('#add_list').serialize(),
type:'json',
success:function(data) {
i=1;
$('.dynamic-added').remove();
$('#add_list')[0].reset();
alert('Record Inserted Successfully.');
}
});
});
});
</script>
А затем это мой файл для запуска сценария sql.
define (DB_USER, "user");
define (DB_PASSWORD, "password");
define (DB_DATABASE, "database");
define (DB_HOST, "host");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
if(!empty($_POST["produce"])){
foreach ($_POST["produce"] as $key => $value) {
$sql = "INSERT INTO category(produce) VALUES ('".$value."')";
$mysqli->query($sql);
}
foreach ($_POST["dairy"] as $key => $value) {
$sql = "INSERT INTO category(dairy) VALUES ('".$value."')";
$mysqli->query($sql);
}
echo json_encode(['success'=>'Shopping List Items Inserted Successfully.']);
}
Я подозреваю, что "строка if (! empty ...) могла бы быть лучше, так как у меня не всегда может быть что-то в «product», но могло бы быть в «dairy». Я беру здесь начальный код с https://itsolutionstuff.com/post/php-dynamically-add-remove-input-fields-using-jquery-ajax-example-with-demoexample.html и пытаюсь расширитьэто для моих нужд.