У меня есть массив текстовых полей (пользовательский интерфейс), который создал HTML, CSS, Bootstrap, Javascript, jQuery, используя внутри пользовательских интерфейсов.
Проблема заключается в том, что входные элементы не распечатывают или отправляют весь массив. Я хочу напечатать весь массив. Он печатает один элемент массива.
order.php (пользовательский интерфейс):
<div class="row">
<form id="ex_order" action="includes/exchange-order.inc.php" method="POST">
<div id="main_div" class="main_sec_div">
<div class="col-lg-12 col-ml-12">
<button type="button" id="add" class="btn btn-primary"><i class="fas fa-plus"></i></button>
</div>
<div class="col-lg-12 col-ml-12 group">
<div class="row" style="padding:0rem 1rem 1rem 1rem; padding-bottom:1.5rem; margin:2rem 0.2rem 2rem 0.2rem; background:#ccc;">
<div class="col-12 mt-5" style="margin:-1rem;">
<span style="margin-left:1rem;" class="status-p bg-primary">Passanger #1</span>
</div>
<!-- Add Ticket Information start -->
<div class="col-3 mt-5">
<div class="card">
<div class="card-body">
<h4 class="header-title">Ticket Infromation</h4>
<p class="text-muted font-14 mb-4">Here are want to add <code>Ticket Infromation</code> of Exchange Order.</p>
<div class="form-group">
<label for="example-text-input" class="col-form-label">Passenger Name</label>
<input name="p_name[]" class="form-control" type="text" id="p_name" required>
</div>
<div class="form-group">
<label for="validationCustom03">Ticket No.</label>
<input name="ticket_no[]" type="text" class="form-control" id="ticket_no" required>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" name="submitOrder" id="submitOrder" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>
<!-- Jquery -->
<script>
$(document).ready(function() {
let i = 0;
let passCount = 1;
console.log('Default i : ', i);
// add button
$(document).on('click', '#add', function() {
i++;
console.log('Add', i);
html = `
<div class="col-lg-12 col-ml-12 second-div" id="sec_div${i}">
<div class="row" style="padding:0rem 1rem 1rem 1rem; padding-bottom:1.5rem; margin:2rem 0.2rem 2rem 0.2rem; background:#ccc;">
<div class="col-12 mt-5" style="margin:-1rem; display:flex; height:60px; align-items:center; align-content:center; justify-content:space-between;">
<div>
<span style="margin-left:1rem;" class="status-p bg-primary">Passanger #${++passCount}</span>
</div>
<div>
<button style="margin:1rem 1rem 0 0;" type="button" name="remove" id="${i}" class="btn btn-danger btn-sm remove"><i class="fa fa-close"></i></button>
</div>
</div>
<div class="col-3 mt-5">
<div class="card">
<div class="card-body">
<h4 class="header-title">Ticket Infromation</h4>
<p class="text-muted font-14 mb-4">Here are want to add <code>Ticket Infromation</code> of Exchange Order.</p>
<div class="col-md-12 mb-3">
<label for="example-text-input" class="col-form-label">Passenger Name</label>
<input name="p_name[]" class="form-control" type="text" id="p_name" required>
</div>
<div class="col-md-12 mb-3">
<label for="validationCustom03">Ticket No.</label>
<input name="ticket_no[]" type="text" class="form-control" id="ticket_no" required>
</div>
</div>
</div>
</div>
</div>
</div>`;
$('#main_div').append(html);
});
});
</script>
order.inc.php (php включает файл):
<?php
// Save Button
if (isset($_POST['submitOrder'])) {
// passenger
$p_name = $_POST['p_name'];
$ticket_no = $_POST['ticket_no'];
var_dump($p_name);
echo '<br/>';
var_dump($ticket_no);
echo '<br/>';
foreach ($p_name as $key => $value) {
echo $p_name[$key];
echo $ticket_no[$key];
echo "<br/>";
}
}