Tengo un script JS que valida los datos de un formulario de contacto. Necesito, una vez que se hayan validado los valores ingresados, enviar los datos al archivo PHP que enviará el correo electrónico. El PHP funciona correctamente (verificado sin el proceso de validación previa al envío de JS)
El JS:
// GET DATA const nameInput = document.querySelector("#name"); const email = document.querySelector("#email"); const phone = document.querySelector("#phone"); const message = document.querySelector("#message"); //...... function sendEmail(){ $.ajax({ type: 'POST', url: 'sendmail.php', data: { 'nameInput': nameInput, 'email': email, 'phone' : phone, 'message' : message }, }); }El PHP:
<?php $toEmail = "mail@mail.com"; $subject = "Message from Whatever" $mailHeaders = "From: " . $_POST["nameInput"] . "<". $_POST["email"] .">\r\n"; if(mail($toEmail, $_POST["subject"], $_POST["message"], $mailHeaders)) { print "<p class='success'>Message Sent</p>"; } else { print "<p class='Error'>Error! try again</p>"; } ?>La consola dice:
Error de referencia no detectado: ajax no está definido en sendEmail (script.js:57:5)
57 $.ajax({
¿Por qué no utilizar la función de envío de formulario predeterminada?
<form method="POST" action="path/to/sendmail.php"> <label for="nameInput">Name:</label> <input type="text" id="nameInput" name="nameInput"> <label for="email">Email:</label> <input type="email" id="email" name="email"> ... <input type="submit" value="Submit"> </form>Parece que falta la biblioteca jQuery en esa página. Asegúrese de cargar jQuery antes de llamar a la función de javascript sendEmail(). Si está seguro, ese jQuery está cargado. Entonces prueba uno de estos:
Su código original, limpiado un poco. Creo que había un carácter invisible en su código, que perturbó la interpretación de su código. Tal vez fue el carácter de espacio entre el apóstrofe char después del teléfono y los dos puntos.
function sendEmail(){ $.ajax({ type: 'POST', url: 'sendmail.php', data: { nameInput: nameInput, email: email, phone: phone, message: message }); };Si no funciona, coloque la definición de su función dentro del bloque documentReady:
$(document).ready(function(){ function sendEmail(){ $.ajax({ type: 'POST', url: 'sendmail.php', data: { nameInput: nameInput, email: email, phone: phone, message: message }); }; });También puede probar la versión de acceso directo de su llamada ajax:
function sendEmail(){ $.post('sendmail.php', { nameInput: nameInput, email: email, phone: phone, message: message } ); };SUGERENCIA: Si no tiene ningún espacio o carácter especial en sus claves de objeto JSON, puede omitir el apóstrofe alrededor de las claves.