Hola tengo un script en js que me envía los datos del formulario de una página al servidor y me funciona bien con una función de Jquery pero me gustaría poder hacerlo sin el uso de Jquery.
script con jQuery (funciona)
$("#contact-form").on("submit", function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "php/email-sender.php",
data: {
name: $("#contact-form #name").val(),
email: $("#contact-form #email").val(),
subject: $("#contact-form #subject").val(),
message: $("#contact-form #message").val()
},
dataType: "json",
success: function(data) {
console.log(“success”);
} else {
console.log(“error”);
}
},
error: function() {
console.log(“error”);
}
});
});
script en PHP que recibe los datos
session_cache_limiter('nocache');
header('Expires: ' . gmdate('r', 0));
header('Content-type: application/json');
$Recipient = '[email protected]'; // <-- Set your email here
if($Recipient) {
$Name = $_POST['name'];
$Email = $_POST['email'];
$Subject = $_POST['subject'];
$Message = $_POST['message'];
if (isset($_POST['category'])) {
$Category = $_POST['category'];
}
$Email_body = "";
if (isset($_POST['category'])) {
$Email_body .= "From: " . $Name . "\n" .
"Email: " . $Email . "\n" .
"Subject: " . $Subject . "\n" .
"Message: " . $Message . "\n" .
"Category: " . $Category . "\n";
} else {
$Email_body .= "From: " . $Name . "\n" .
"Email: " . $Email . "\n" .
"Subject: " . $Subject . "\n" .
"Message: " . $Message . "\n" .
"Enviado el " . date('d/m/Y', time());
}
$Email_headers = "";
$Email_headers .= 'From: ' . $Name . ' <' . $Email . '>' . "\r\n".
"Reply-To: " . $Email . "\r\n";
$sent = mail($Recipient, $Subject, $Email_body, $Email_headers);
if ($sent){
$emailResult = array ('sent'=>'yes');
} else{
$emailResult = array ('sent'=>'no');
}
echo json_encode($emailResult);
} else {
$emailResult = array ('sent'=>'no');
echo json_encode($emailResult);
}
HTML asociado
<form id="contact-form" role="form">
<div class="form-group has-feedback">
<input type="text" class="form-control" id="name" name="name" placeholder="Nombre" required>
</div>
<div class="form-group has-feedback">
<input type="email" class="form-control" id="email" name="email" placeholder="Correo electronico" required>
</div>
<div class="form-group has-feedback">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Asunto" required>
</div>
<div class="form-group has-feedback">
<textarea class="box-msg" rows="6" id="message" name="message"> </textarea>
</div>
<div class="form-group has-feedback">
<input type="submit" value="Enviar" class="submit-button btn btn-default">
</div>
</form>
Primer intento sin jQuery
// Submit contactForm START
const contactForm = document.getElementById("contact-form");
contactForm.addEventListener("submit", function(event) {
event.preventDefault();
var request = new XMLHttpRequest();
request.open("POST", "/php/email-sender.php", true);
request.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8"
);
request.onreadystatechange = function() {
if (request.readyState == XMLHttpRequest.DONE) {
// request end.
if (request.status == 200) {
// success START
console.log(request.response);
// success END
} else {
// error START
console.log("error");
// error END
}
}
};
var formData = new FormData();
data.append("name", document.getElementById("name").value);
data.append("email", document.getElementById("email").value);
data.append("subject", document.getElementById("subject").value);
data.append("message", document.getElementById("message").value);
request.send(formData);
});
segundo intento sin jQuery
var contactForm = document.getElementById("contact-form");
contactForm.addEventListener("submit", function(event) {
event.preventDefault();
var request = new XMLHttpRequest();
request.open("POST", "/php/email-sender.php", true);
request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
request.onreadystatechange = function() {
if (request.readyState == XMLHttpRequest.DONE) {
// request end.
if (request.status == 200) {
// success START
console.log(request.response);
// success END
} else {
// error START
console.log("error");
// error END
}
}
};
var data = {
name: document.getElementById("name").value,
email: document.getElementById("email").value,
subject: document.getElementById("subject").value,
message: document.getElementById("message").value
};
request.send(JSON.stringify(data));
});
ninguno de los 2 intentos tienen exito, gracias de antemano.