Tengo una serie de campos de texto (interfaz de usuario) que crearon HTML, CSS, Bootstrap, Javascript, Jquery usando dentro de las interfaces de usuario. Debajo del código aquí.

El problema es cuando los elementos de entrada que no imprimen o envían toda la matriz. Quiero imprimir toda la matriz. Imprime un elemento de matriz.

order.php (interfaz de usuario):

    <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 incluye archivo):

<?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/>";
    }
}
0
Najathi 4 nov. 2019 a las 18:55

1 respuesta

He resuelto mi problema que devuelve todo el elemento de matriz para enviar a PHP incluye archivo.

array(2) { [0]=> string(7) "6386868" [1]=> string(6) "868768" }

array(2) { [0]=> string(4) "6868" [1]=> string(4) "6868" }

El problema es el elemento DOM . No pongo la etiqueta <form> en el lugar correcto. Cuando hago clic en el botón Agregar, jquery está agregando la etiqueta <form>.

Solución: Cambié la etiqueta <form> fuera de la etiqueta bootstrap <div> que funciona bien y devuelve todo el elemento de la matriz.

0
Najathi 5 nov. 2019 a las 16:10