I have tried to send a form with AJAX and PHP to an email but I have not succeeded.
HTML:
<form action="" method="post" target="_blank" onsubmit='event.preventDefault(); sendForm1("form-contacto")' name="form-contacto">
<input type="hidden" name="clientRequest" id="clientRequest" value="true" />
<input type="hidden" name="validDate" id="validDate" value="" />
<input type="hidden" name="optin1" id="optin1" value="true" />
<div class="row">
<div class="col-sm-6">
<div class="ffield">
<label for="firstname">Nombre</label>
<input type="text" name="nombre-contacto-2" id="firstname" value="" placeholder="Nombre usuario o empresa" required />
</div>
</div><!-- .col-sm-6 -->
<div class="col-sm-6">
<div class="ffield">
<label for="email">* Correo electrónico</label>
<input type="email" name="email-contacto-2" id="email" value="" placeholder="*Correo electrónico" required />
</div>
</div><!-- .col-sm-6 -->
</div><!-- .row -->
<div class="row">
<div class="col-sm-12">
<div class="ffield">
<label for="firstname">Telefono</label>
<input type="text" name="telefono-contacto-2" id="telefono" value="" placeholder="Telefono" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="comment">Mensaje</label>
<textarea class="form-control" rows="5" id="mensaje" placeholder="Escribir consulta" name="mensaje-contacto-2" required></textarea>
</div>
</div>
</div>
PHP:
<?php
$input = json_decode(file_get_contents("php://input") , true);
$ToEmail = "[email protected]";
$EmailSubject = "CONTACTO ";
$mailheader="FUE ENVIADO POR".$_POST['nombre-contacto-2']."\n";
$mailheader .= "From: ".$_POST['email-contacto-2']."\r\n";
$MESSAGE_BODY = "Nombre: ".$_POST['nombre-contacto-2']."";
$MESSAGE_BODY .= "Telefono: ".$_POST['telefono-contacto-2']."\n";
$MESSAGE_BODY.="MENSAJE".$_POST['mensaje-contacto-2'];
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure");
echo "Saved";
?>
JS:
function sendForm1(formName){
var http = new XMLHttpRequest();
http.open("POST","send-email-macza-2.php",true);
http.send(JSON.encodeForm(document.forms[formName]));
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
console.log(http.responseText);
document.getElementById("envio-exitoso-1").innerHTML="<h1>Datos Enviados Correctamente</h1>";
}
}
}
JSON.encodeForm = function(form){
var array = {};
for (key in form) {
var item=form[key];
if(form.hasOwnProperty(key) && item == "[object HTMLInputElement]"){
array[item.name]=item.value;
}
}
return JSON.stringify(array);
}
And when sending I only receive the following:
IT WAS SUBMITTED BY:
Desde:
Name:
Phone:
MESSAGE
Apparently the variables are left blank, does anyone know why this happens?
In the part of PHP that processes the data, you are obtaining all the input values through the $input variable through file_get_contents() , therefore, when doing the concatenation, this should be the name of the variable and inside just grill the name of the HTML input that contains the value you want to send
The error that you mention that it appears undefined is because you surely have the javascript code in another file and you are not calling it, so it should be in this order
The following is how your php should look
And your javascript like this
You have the error in the routine to serialize the form.
You are not correctly iterating the elements of the form, attached I leave you a simple example of how to do it.