0

Tengo un problema con un formulario de opinion que valida sus campos con javascript y con este mismo se crea una petición ajax a un archivo php, el cual tiene que enviar un correo con los datos del formulario. Mi problema es que cuando quiero mostrar la respuesta del archivo php al js en consola para verificar, me marca el siguiente error VM242:1 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse () at XMLHttpRequest.xhr.onload

Realmente no entiendo cual es el error en mi código, checando network en mi navegador el status de la petición es 200, existen parametros pero no la respuesta, espero puedan ayudarme.

Mi código del formulario es

<form action="#" method="POST" class="form-opinion" id="form-opinion" novalidate>
    <div class="group">
        <input type="text" name="nombre" id="nombre" required="" autocomplete="off" value=""><span class="barra"></span>
        <label for="nombre" class="float-label">Nombre completo:</label>   
        <div id="error-nombre"></div>                  
    </div>
    <div class="group">
        <input type="text" name="email" id="email" required="" autocomplete="off" value=""><span class="barra"></span>
        <label for="email" class="float-label">Correo electrónico:</label>                      
        <div id="error-email"></div>
    </div>
    <div class="form-star">
        <label for="" class="">Calificanos:</label>
        <p class="clasificacion">
            <!-- first star -->
            <input id="radio1" class="input-star" type="radio" name="votacion" value="5">
            <label for="radio1" class="label-star">&#9733;</label>
            <!-- second star -->
            <input id="radio2" class="input-star" type="radio" name="votacion" value="4">
            <label for="radio2" class="label-star">&#9733;</label>
            <!-- third star -->
            <input id="radio3" class="input-star" type="radio" name="votacion" value="3">
            <label for="radio3" class="label-star">&#9733;</label>
            <!-- fourth star -->
            <input id="radio4" class="input-star" type="radio" name="votacion" value="2">
            <label for="radio4" class="label-star">&#9733;</label>
            <!-- fifth star -->
            <input id="radio5" class="input-star" type="radio" name="votacion" value="1">
            <label for="radio5" class="label-star">&#9733;</label>
        </p>                      
    </div>
    <div id="error-votacion"></div>
    <div class="group">
        <textarea name="mensaje" id="mensaje" rows="3" required="" autocomplete="off"></textarea><span class="barra"></span>
        <label for="mensaje" class="float-label">Mensaje:</label>                      
        <div id="error-mensaje"></div>
    </div>                   
    <button type="submit" class="btn btn-primary" id="btn-formOpinion" name="submit">Enviar</button>
</form>

Mi archivo javascritp

const formOpinion = document.getElementById('form-opinion');

eventListener();

function eventListener(){
    //cuando el formulario se crear o editar se ejecuta
    formOpinion.addEventListener('submit', leerFormulario);
}

function leerFormulario(e){
    e.preventDefault();

    //form fields
    let nombre = document.getElementById('nombre'),
        email = document.getElementById('email'),
        mensaje = document.getElementById('mensaje'),
        votacion = document.getElementsByName('votacion');

    //error divs
    var errorNombre = document.getElementById('error-nombre'),
        errorEmail = document.getElementById('error-email');
        errorVotacion = document.getElementById('error-votacion');
        errorMensaje = document.getElementById('error-mensaje');

    //expresiones regulares
    const regexTexto = /^[a-z][a-z]*/;
    const regexEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/;


    for (var i=0; i<votacion.length; i++) {
        if (votacion[i].checked == true) {
            var valor_votacion = votacion[i].value;        
        }
    }

    if(nombre.value.trim() === '' || !regexTexto.test(nombre.value.trim().toLowerCase())){
        errorNombre.style.display = 'block';
        errorNombre.innerHTML = 'Por favor, ingresa un nombre.';

        setTimeout(()=>{
            errorNombre.style.display = 'none';
        },3000);

        nombre.focus();        
    }else if(email.value.trim() === ''){
        errorEmail.style.display = 'block';
        errorEmail.innerHTML = 'Por favor, ingresa un correo electrónico';

        setTimeout(()=>{
            errorEmail.style.display = 'none';
        },3000);

        email.focus();        
    }else if(!regexEmail.test(email.value.trim())){ 
        errorEmail.style.display = 'block';
        errorEmail.innerHTML = 'Por favor, ingresa un correo valido.';

        setTimeout(()=>{
            errorEmail.style.display = 'none';
        },3000);

        email.focus();         
    }else if(!valor_votacion){  
        errorVotacion.style.display = 'block';
        errorVotacion.innerHTML = 'Por favor, califica nuestro servicio.';

        setTimeout(()=>{
            errorVotacion.style.display = 'none';
        },3000);                      
    }else if(mensaje.value.trim() === ''){  
        errorMensaje.style.display = 'block';
        errorMensaje.innerHTML = 'Por favor, ingresa un comentario o sugerencia.';

        setTimeout(()=>{
            errorMensaje.style.display = 'none';
        },3500);    

        mensaje.focus();           
    }else{  
        //si la validacion es correcta hace una llamada ajax  
        const datosComentario = new FormData();
        datosComentario.append('nombre',nombre.value);
        datosComentario.append('email',email.value);
        datosComentario.append('votacion',valor_votacion);
        datosComentario.append('mensaje',mensaje.value);

        console.log(...datosComentario);

        enviarComentario(datosComentario);       
    }
}

//enviando los datos por ajax
function enviarComentario(datos){
    //creando objeto
    const xhr = new XMLHttpRequest();

    //abriendo conexion
    xhr.open('POST','modelos_ajax/modelo_opinion.php', true);

    //se pasan los datos
    xhr.onload = function(){
        if(this.status === 200){
            const respuesta = JSON.parse(xhr.responseText); 

            console.log(xhr.responseText);
        }
    }

    //se envian los datos
    xhr.send(datos);
}

Archivo php

<?php

    if (isset($_POST['submit'])) {
        $nombre = filter_var(trim($_POST['nombre']), FILTER_SANITIZE_STRING);
        $email  = $_POST['email'];
        $email = filter_var(trim($_POST['email']), FILTER_SANITIZE_EMAIL);
        $email .= filter_var($email, FILTER_VALIDATE_EMAIL);
        $votacion = $_POST['votacion'];
        $mensaje = htmlspecialchars($_POST['mensaje']);
        $mensaje .= trim($mensaje);
        $mensaje .= stripslashes($mensaje);

        if (!empty($nombre) && !empty($email) && !empty($votacion) && !empty($mensaje)) {
            $email_to = "[email protected]";
            $email_subject = "Comentario o sugerencia del servicio del Jardín de Niños Villa Infantil MI";
            $email_message = "Contenido del mensaje: \n\n";
            $email_message .= "Nombre: " . $nombre;
            $email_message .= "\n Correo: " . $email;
            $email_message .= "\n Calificación: " . $votacion . "estrellas";
            $email_message .= "\n Comentario o sugerencia: " . $mensaje;

            $header = "De: " . $email . "\r\n";

            mail($email_to, $email_subject, $email_message, $header);  

            $respuesta = array(
                "respuesta" => true
            );
        }else{
            $respuesta = array(
                "respuesta" => false
            );
        }

        echo json_encode($respuesta);
    }
?>
2
  • Intenta usar un header en php header('Content-Type: application/json'); antes de json_encode. Ademas creo que estas concatenando el email a otro email Commented el 16 mar. 2020 a las 8:56
  • ¿Qué muestra la consola en console.log(xhr.responseText);?
    – A. Cedano
    Commented el 16 mar. 2020 a las 9:31

1 respuesta 1

1

No necesitas usar FormData para este caso, usarlo es sólo complicarte la vida. Generalmente FormData se usa para formularios multipart (por ejemplo formularios en los que además de los datos normales como nombre, apellido, etc enviarás archivos adjuntos).

Además, en PHP estás preguntando por $_POST['submit'], pero no se está enviando ninguna clave submit en los datos.

Intenta cambiar tu variable datosComentario por un objeto como este, sin FormData y agregando una clave submit si vas a evaluar por ella:

    const datosComentario = {
            submit: 'sendEmail',
            nombre: nombre.value,
            email: email.value,
            votacion: valor_votacion,
            mensaje: mensaje.value
        };

Enviando los datos de ese modo, sí podras recuperarlos por $_POST como se hace normalmente.

Si por algún motivo tienes que usar FormData sí o sí, debes saber que la forma de obtener esos datos no es tan simple como hacer un $_POST["nombre"], sino que tendrías que usar parse_str y probablemente poner una clave que agrupe la parte de los datos personales (precisamente porque FormData está pensado para formularios multipart`, como ya se ha dicho). Para más detalles sobre la forma de leerlo, puedes ver esta respuesta.

En cuanto al código PHP, también hay errores:

  1. La respuesta se encuentra dentro del if principal. Si no entra en ese bloque, que de hecho no está entrando por todo lo explicado antes, no hay respuesta ninguna.
  2. El resultado de mail debería también ser evaluado.
  3. Convendría poner un header

También, para simplificar, se puede declarar $respuesta=false al inicio. Así sólo cambiará cuando pase lo contrario.

Para simplificar puedes hacer algo así:

#false por defecto, nos evitará 5 líneas de código innecesarias
$respuesta=false;
if (isset($_POST['submit'])) {
    $nombre = filter_var(trim($_POST['nombre']), FILTER_SANITIZE_STRING);
    $email  = $_POST['email'];
    $email = filter_var(trim($_POST['email']), FILTER_SANITIZE_EMAIL);
    $email .= filter_var($email, FILTER_VALIDATE_EMAIL);
    $votacion = $_POST['votacion'];
    $mensaje = htmlspecialchars($_POST['mensaje']);
    $mensaje .= trim($mensaje);
    $mensaje .= stripslashes($mensaje);
    #Definimos $respuesta en el if evitando el else interior
    if (!empty($nombre) && !empty($email) && !empty($votacion) && !empty($mensaje)) {
        $email_to = "[email protected]";
        $email_subject = "Comentario o sugerencia del servicio del Jardín de Niños Villa Infantil MI";
        $email_message = "Contenido del mensaje: \n\n";
        $email_message .= "Nombre: " . $nombre;
        $email_message .= "\n Correo: " . $email;
        $email_message .= "\n Calificación: " . $votacion . "estrellas";
        $email_message .= "\n Comentario o sugerencia: " . $mensaje;

        $header = "De: " . $email . "\r\n";
        #mail podría fallar, pase lo que pase, la variable será true o false
        $respuesta=mail($email_to, $email_subject, $email_message, $header);  
    }
}
header("Content-type: application/json; charset=utf-8");
echo json_encode( array("respuesta"=>$respuesta) );
5
  • gracias por contestar a mi pregunta, pero tengo una duda, en el objeto en submit: 'sendEmail', ¿el valor de este campo tiene que coincidir en el boton del formulario en el id o name?. Commented el 18 mar. 2020 a las 17:58
  • @AndreaEscobar no, en este caso no, pero si quieres lo puedes poner. Cuando en PHP haces esto: if (isset($_POST['submit'])) { lo que se pregunta literalmente es si entre los datos enviados hay una clave llamada submit, y la clave es el dato que está a la izquierda de cada par, o sea, en este par: submit: 'sendEmail', la clave es submit y el valor es sendMail. Es lo mismo que nombre, email y los demás, lo que hay a la izquierda es la clave por la que se serializa el array que se recibe luego en $_POST. Si tú haces por ejemplo echo $_POST["submit"]; se imprimirá sendMail.
    – A. Cedano
    Commented el 18 mar. 2020 a las 18:57
  • ya entendi porque lo declaraste asi, tome la opcion de eliminar el FormData y manejarlo como lo planteaste pero haciendo pruebas solo me regresa false como respuesta, coloque aparte la instruccion en donde viene email para verificar que de minimo se recibieran los datos y asi generar un true pero lo unico que retorna es []. Commented el 18 mar. 2020 a las 20:01
  • @AndreaEscobar si quieres edita la pregunta poniendo al final la nueva versión del código para revisarla.
    – A. Cedano
    Commented el 18 mar. 2020 a las 20:20
  • ya vi cual era el problema, en ningun momento añadi al FormData() el submit de mi formulario, al agregar datosComentario.append('submit',btnForm.value); pude simplemente validar el (isset($_POST['submit'])). Con tu solución me salieron errores, sin embargo me ayudaste a comprender mejor como funciona ajax, gracias. Commented el 28 mar. 2020 a las 1:18

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.