1

Estoy haciendo un formulario PHP, en el cuál el usuario debe ingresar sus datos y estos se envían por correo. Dentro del formulario, el usuario debe poner los datos de cada uno de sus hijos. Para eso, hice una tabla en donde el usuario mediante un botón de "agregar", puede agregar una fila para cada hijo y completar sus datos.

Mi problema es que cuando se envía el correo con datos de dos o más hijos, en dicho correo solo figuran los datos de un solo hijo. Es como si solo tomara los datos del último hijo ingresado y se superpusieran.

Dejo la demo de mi sitio: http://kickads.mobi/prevem/

Quisiera saber si alguien podía decirme qué código debo agregar o modificar para hacer que sean los datos de cada uno de los hijos ingresados.

Mi código es el siguiente (HTML/JS/PHP):

/* Variables */
var p = $("#participants").val();
var row = $(".participantRow");

/* Functions */
function getP() {
  p = $("#participants").val();
}

function addRow() {
  row.clone(true, true).appendTo("#participantTable");
}

function removeRow(button) {
  button.closest("tr").remove();
}

/* Doc ready */
$(".add").on('click', function () {
  getP();

  if ($("#participantTable tr").length < 17) {
    addRow();
    var i = Number(p)+1;
    $("#participants").val(i);
  }

  $(this).closest("tr").appendTo("#participantTable");

  if ($("#participantTable tr").length === 3) {
    $(".remove").hide();
  } else {
    $(".remove").show();
  }
});

$(".remove").on('click', function () {
  getP();

  if ($("#participantTable tr").length === 3) {
    //alert("Can't remove row.");
    $(".remove").hide();
  } else if ($("#participantTable tr").length - 1 == 3) {
    $(".remove").hide();
    removeRow($(this));
    var i = Number(p) - 1;
    $("#participants").val(i);
  } else {
    removeRow($(this));
    var i = Number(p) - 1;
    $("#participants").val(i);
  }
});

$("#participants").change(function () {
  var i = 0;
  p = $("#participants").val();
  var rowCount = $("#participantTable tr").length - 2;
  
  if (p > rowCount) {
    for (i = rowCount; i < p; i += 1) {
      addRow();
    }
  
    $("#participantTable #addButtonRow").appendTo("#participantTable");
  } else if (p < rowCount) {
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="contacto.php" method="POST" class="register-form" role="form" id="register-form" autocomplete="off">
    <h2>Solicitar cotización</h2>

    <div class="form-row">
        <div class="form-group">
            <label for="name">Nombre completo: *</label>
            <input type="text" name="name" id="name" placeholder="Nombre/s y apellido/s" required/>
        </div>
        <div class="form-group">
            <label for="father_name">Teléfono: *</label>
            <input type="text" name="tel" id="tel" placeholder="Celular" required/>
        </div>
    </div>

    <div class="form-radio">
        <label for="marry" class="radio-label">Cónyuge: *</label>
        <div class="form-radio-item">
            <input type="radio" name="casadx" id="si" checked value="Si">
            <label for="si">Si</label>
            <span class="check"></span>
        </div>
        <div class="form-radio-item">
            <input type="radio" name="casadx" id="no" value="No">
            <label for="no">No</label>
            <span class="check"></span>
        </div>
    </div>

    <div class="form-group">
        <label for="name-casadx">Nombre de su cónyuge:</label>
        <input type="text" name="namecasadx" id="namecasadx" placeholder="Nombre/s y apellido/s">
    </div>

   <div class="form-radio">
        <label for="sons" class="radio-label">Hijos: *</label>
        <div class="form-radio-item">
            <input type="radio" name="hijos" id="hsi" checked value="Si">
            <label for="hsi">Si</label>
            <span class="check"></span>
        </div>
        <div class="form-radio-item">
            <input type="radio" name="hijos" id="hno" value="No">
            <label for="hno">No</label>
            <span class="check"></span>
        </div>
    </div>

    <div class="form-group">
        <table id="participantTable">
           <thead>
                <tr>
                    <th scope="col">Nombre:</th>
                    <th scope="col">Edad:</th>
                    <th scope="col">Sexo:</th>
                </tr>
            </thead>
            <tbody>
                <tr class="participantRow form-group">
                    <td><input name="namehijos" id="" type="text" placeholder="Nombre/s" class="required-entry"></td>
                    <td>
                        <select style="color: dimgray" name="age" id="age" class="required-entry minimal">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="+20">+20</option>
                        </select>
                    </td>
                    <td>
                        <select style="color: dimgray" name="gender" id="gender" class="required-entry minimal">
                            <option value="">Seleccionar</option>
                            <option value="Femenino">Femenino</option>
                            <option value="Masculino">Masculino</option>
                            <option value="NoDefinido">No Definido</option>
                        </select>
                    </td>
                    <td><button class="btn btn-danger remove" type="button">Eliminar</button></td>
                </tr>
                <tr id="addButtonRow">
                    <td colspan="4"><button class="btn btn-large btn-success add" type="button">Agregar</button></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="form-group">
        <label for="email">Correo electrónico: *</label>
        <input type="email" name="email" id="email" placeholder="E-mail" required/>
    </div>

    *Campos obligatorios

    <div class="form-submit">
        <input type="reset" value="Borrar todo" class="submit" name="reset" id="reset" />
        <input type="submit" value="Enviar" class="submit" name="submit" id="submit" />
    </div>
</form>

<?php
$nombre = isset($_POST['name']) ? $_POST['name'] : '';
$tel = isset($_POST['tel']) ? $_POST['tel'] : '';
$email = isset($_POST['email']) ? $_POST['email'] : '';
$casadx = isset($_POST['casadx']) ? $_POST['casadx'] : '';
$namecasadx = isset($_POST['namecasadx']) ? $_POST['namecasadx'] : '';
$hijos = isset($_POST['hijos']) ? $_POST['hijos'] : '';
$namehijos = isset($_POST['namehijos']) ? $_POST['namehijos'] : '';
$age = isset($_POST['age']) ? $_POST['age'] : '';
$gender = isset($_POST['gender']) ? $_POST['gender'] : '';

$to      = '[email protected], [email protected]';
$subject = 'Cotización';
$message = "Hola, envío este mail para solicitar una cotización. Estos son mis datos:<br/>
<b>Nombre:</b> $nombre<br/>
<b>Teléfono:</b> $tel<br/>
<b>E-Mail:</b> $email<br/>
<b>Cónyuge:</b> $casadx<br/>
<b>Nombre del cónyuge:</b> $namecasadx<br/>
<b>Hijos:</b> $hijos<br/>
<b>Nombre:</b> $namehijos<br/>
<b>Edad:</b> $age<br/>
<b>Género:</b> $gender 
";

$headers = 'From: ' . $_POST["name"] . '<' . $_POST["email"] . '>' . "\r\n" .
    'Reply-To: '.$email. "\r\n" .
    'X-Mailer: PHP/' . phpversion() . "\r\n" .
    'Content-Type: text/html; charset=UTF-8' . "\r\n";
mail($to, $subject, $message, $headers);
header('Location: thankyou.html');
exit;
?>

2 respuestas 2

0

Al momento de enviar el mensaje estas mandado la información estática de un sólo hijo, debes tratar este dato $hijos como un objeto , por lo tanto tienes que hacer un array() asociativo de hijos , para pedirlos mediante una petición ajax y después insertarlos con un ciclo for();

0

Para enviar una lista al servidor debes agregar el sufijo [] al atributo name de los campos de formulario, como se ve a continuación:

<tr class="participantRow form-group">
    <td><input name="namehijos[]" id="" type="text" placeholder="Nombre/s" class="required-entry"></td>
    <td>
        <select style="color: dimgray" name="age[]" id="age" class="required-entry minimal">
            <option value="0">0</option>
            <!-- ... -->
            <option value="+20">+20</option>
        </select>
    </td>
    <td>
        <select style="color: dimgray" name="gender[]" id="gender" class="required-entry minimal">
            <option value="">Seleccionar</option>
            <option value="Femenino">Femenino</option>
            <option value="Masculino">Masculino</option>
            <option value="NoDefinido">No Definido</option>
        </select>
    </td>
    <td><button class="btn btn-danger remove" type="button">Eliminar</button></td>
</tr>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.