0

Tengo un formulario sencillo, con el cual, a partir de unos datos realizo un cálculo. Ahora le he agregado la opción de esos datos y el resultado mandarlos por mail.

introducir la descripción de la imagen aquí Según la cantidad de menores que se ingresen, necesito conocer las edades de cada uno de ellos. A continuación el código para crear estos selects dinámicos:

    var hijos = 0;
//var optsel = "<option></option>";
 $('#cantme').on('keyup',function(){
    hijos = $("#cantme").val();
            if ( hijos > 0 ) {
            //  alert("hay " + hijos + "menores");
            for( i = 1; i <= hijos ; i++ ){
                $("#cantMenores").append('<div class="col-md-3" class="cant-menores"><select class="input-sm" name="edadMenores_'+i+'" id ="edadMenores_'+i+'"><option value="">Edad del menor '+i+'</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></select></div>');
                }

            }  })   

Al momento de mandar el mail, tengo lo siguiente:

function submitForm(){

    var nombre = $("#nombre").val();
    var correo = $("#correo").val();
    var desti = $("#destinos option:selected").html();
    //var message = $("#message").val();
    var cantHab = $("#canthabitaciones").val();
    var cantAdu = $("#cantiacompa").val();
    var cantMen = $("#cantme").val();
    //var edadMenor = //$('#edadMenores_1').serialize();
    /*var edadMenor = [];
        if( cantMen > 0 ){
            for (var i; i <= cantMen; i++) {
                edadMenor = $('#edadMenores_1').val();
                alert(edadMenor);
            }
        }*/
    //alert(edadMenor);
    $.ajax({
        type: "POST",
        url: "procesa-simulador.php",
        data: {nombre: nombre, correo: correo, cantHab: cantHab, cantAdu: cantAdu, cantMen: cantMen, desti: desti},
        success : function(text){
            if (text == "success"){
                formSuccess();
            }
        }
    });
}

(Lo comentado son pruebas que he realizado) ¿Cómo puedo hacer para enviar estos datos por mail? O sea, por ejemplo, si cantidad de menores es 0, manda 0 (con esta opción no tengo problema). Si cantidad de menores es 3, mandaría:
Cantidad de Menores = 3
"Menor 1" - 3 años
"Menor 2" - 6 años
"Menor 3" - 1 años

Aclaración: sacando esta duda, el mail lo envía perfectamente. Así llega el mail en este momento (cuando no hay menores ;) ):
Nombre: Aguilera, Juan
Email: [email protected]
Destino: Córdoba
Cantidad de Habitaciones: 1
Cantidad de Adultos: 3
Cantidad de Menores: 0

Gracias

1 respuesta 1

1

Estabas un poco cerca de lograr capturar la edad de los menores de forma correcta, solo debemos recorrer la cantidad de select que se hayan generado y a cada uno capturarle su name (que lo usaremos para saber cual menor es) y su valor, ambos datos los agregaremos a un array como un objeto, cuyas propiedades serán menor y edad generando finalmente un array de objetos.

He intentado generar tu formulario en el ejemplo y también es bueno que tengas en cuenta que el resto de campos que tenías los he omitido, ya tu los puedes volver a agregar.

Te dejo el ejemplo funcional con un console.log() donde te muestro al final como se ha generado el array de objetos que contiene las edades de los menores.

$(document).ready(function(){
    var hijos = 0;
    
    $('#cantme').on('keyup',function(){
        hijos = $("#cantme").val();

        $("#cantMenores").html('');

        if ( hijos > 0 ) {
            for( i = 1; i <= hijos ; i++ ){
                $("#cantMenores").append('<div class="col-md-3"><div class="form-group"><select class="input-sm" name="edadMenor_'+i+'" id ="edadMenor_'+i+'"><option value="">Edad del menor '+ i +'</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></select></div></div>');
            }
        }
    });

    $("#formulario").submit(function(e){
        e.preventDefault();

        var cantAdu = $("#cantiacompa").val();
        var cantMen = $("#cantme").val();

        var edadesMenores = [];

        $("#cantMenores select").each(function(index, dato){
            edadesMenores.push({'menor':$(dato).attr('name'), 'edad':$(dato).val()});
        });

        console.log('Cantidad adultos: ' + cantAdu + ' Cantidad menores: ' + cantMen);
        console.log(edadesMenores);

        $.ajax({
            type: "POST",
            url: "procesa-simulador.php",
            data: {cantAdu: cantAdu, cantMen: cantMen, edadesMenores: JSON.stringify(edadesMenores)},

            success : function(text){
                if (text == "success"){
                    formSuccess();
                }
            }
        });
    });
});
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <form id="formulario" method="" action="#">
        <div class="form-group">
            <label>Cantidad de adultos*</label>
            <input type="text" name="cantiacompa" id="cantiacompa" class="form-control">
        </div>

        <div class="form-group">
            <label>Cantidad de menores*</label>
            <input type="text" name="cantme" id="cantme" class="form-control">
        </div>

        <div id="cantMenores" class="col-md-12"></div>
        
        <div class="form-group">
            <button type="submit" class="btn btn-info" id="calcular">Calcular</button>
            <button type="button" class="btn btn-info" id="borrar">Borrar</button>
        </div>
    </form>
</div>

En este ejemplo funcional te muestro como capturar los datos y enviarlos al archivo PHP, recuerda que he omitido otros datos que tenías solo para generar este ejemplo pero tu puedes volverlos a agregar tal y como los tenías, ahora te mostraré como deberás recibir en PHP ese array de objetos que hemos enviado:

$cantAdu = $_POST['cantAdu'];
$cantMen = $_POST['cantMen'];
$edadesMenores = json_decode($_POST['edadesMenores']);

Una vez que recibas edadesMenores de esta forma podrás manipularlos como un objeto, podrás recorrerlos en un foreach o emplear tu lógica para procesar los datos:

foreach($edadesMenores as $key => $edad){
    echo($edad->menor . ' ' . $edad->edad);
}
2
  • Camilo. Al final de la pregunta agregué algo que sucede ahora. Una parte funcionó perfecto, pero ahora falla el envío o el retorno de la respuesta el 21 dic. 2017 a las 1:57
  • @SolucionesPyMESyHogares debes crear otra pregunta para eso por que ya parece que el problema viene siendo el PHP al retornar los datos y no el JS al enviarlos, te invito a que finalicemos esta pregunta aceptando la respuesta crees la nueva y busquemos la solución a tu nuevo problema, saludos! el 21 dic. 2017 a las 2:06

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.