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">★</label>
<!-- second star -->
<input id="radio2" class="input-star" type="radio" name="votacion" value="4">
<label for="radio2" class="label-star">★</label>
<!-- third star -->
<input id="radio3" class="input-star" type="radio" name="votacion" value="3">
<label for="radio3" class="label-star">★</label>
<!-- fourth star -->
<input id="radio4" class="input-star" type="radio" name="votacion" value="2">
<label for="radio4" class="label-star">★</label>
<!-- fifth star -->
<input id="radio5" class="input-star" type="radio" name="votacion" value="1">
<label for="radio5" class="label-star">★</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);
}
?>
header('Content-Type: application/json');
antes dejson_encode
. Ademas creo que estas concatenando el email a otro emailconsole.log(xhr.responseText);
?