6

He intentado enviar un formulario con AJAX y PHP a un correo electrónico sin embargo no lo he conseguido.

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 = "mi-email@gmail.com"; 
 $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);
}

Y al enviar solo recibo lo siguiente:

FUE ENVIADO POR:

From:

Nombre:

Telefono:

MENSAJE

Al parecer las variables quedan en blanco, ¿alguien sabe por qué ocurre?

1
  • Por como procesas el formulario en encodeForm, no se va a enviar el mensaje en sí (el campo mensaje-contacto-2) porque es un textarea por lo que no va a ser [object HTMLInputElement] sino [HTMLTextAreaElement] y se va a ignorar (lo cual te generará errores luego, aunque no debería bloquear el envío del email).
    – Alvaro Montoro
    el 29 mar. 2018 a las 2:34

2 respuestas 2

5

En la parte de PHP que procesa los datos, estas obteniendo todos los valores input a través de la variable $input por medio de file_get_contents() por lo tanto al momento de hacer la concatenación este mismo debería ser el nombre de la variable y por dentro solo asar el nombre del input HTML que contiene el valor que deseas enviar

<?php 
 $input = json_decode(file_get_contents("php://input") , true);
 $ToEmail = "mi-email@gmail.com"; 
 $EmailSubject = "CONTACTO "; 
 $mailheader="FUE ENVIADO POR".$input['nombre-contacto-2']."\n";
 $mailheader .= "From: ".$input['email-contacto-2']."\r\n";
 $MESSAGE_BODY = "Nombre: ".$input['nombre-contacto-2'].""; 
  $MESSAGE_BODY .= "Telefono: ".$input['telefono-contacto-2']."\n"; 
 $MESSAGE_BODY.="MENSAJE".$input['mensaje-contacto-2'];
 mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure"); 

 echo "Saved";

El error que mencionas de que te aparece no definido es por que seguramente tienes el código javascript en otro archivo y no lo estas invocando, entonces te debería quedar en este orden

<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"></textarea>
                            </div>

            </div>

        </div>
        <div id="envio-exitoso-1"></div>
<input type="submit" value="enviar ">
</form>
<script src="funcion.js"></script>

Lo siguiente es como debe quedar tu php

<?php 
 $input = json_decode(file_get_contents("php://input") , true);
 $ToEmail = "correo@hotmail.com"; 
 $EmailSubject = "CONTACTO "; 
 $mailheader="FUE ENVIADO POR".$input['nombre-contacto-2']."\n";
 $mailheader .= "From: ".$input['email-contacto-2']."\r\n";
 $MESSAGE_BODY = "Nombre: ".$input['nombre-contacto-2'].""; 
  $MESSAGE_BODY .= "Telefono: ".$input['telefono-contacto-2']."\n"; 
 $MESSAGE_BODY.="MENSAJE".$input['mensaje-contacto-2'];
 mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure"); 

 echo "Saved";

Y tu javascript así

function sendForm1(formName){
    var http = new XMLHttpRequest();
    http.open("POST","send.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);
}
13
  • Me sale que la función sendForm1() no está definida, ¿a qué se puede deber esto? el 29 mar. 2018 a las 1:55
  • @paulzapata ese error que comentas tiene que venir de otro sitio. He probado la solución de Shadow Paz en local y me ha funcionado correctamente.
    – Alvaro Montoro
    el 29 mar. 2018 a las 2:00
  • checa lo que anexaré a la respuesta para decirte por que te aparece ese error
    – user75901
    el 29 mar. 2018 a las 2:34
  • ok, estaré al tanto. el 29 mar. 2018 a las 2:37
  • ya quedo en la respuesta asumo que no estabas invocando el archivo javascript dentro del html
    – user75901
    el 29 mar. 2018 a las 2:38
1

El error lo tienes en la rutina para serializar el formulario.

No estas iterando correctamente los elementos del formulario, anexo te dejo un ejemplo sencillo de como hacerlo.

JSON.encodeForm = function(form){
 var array = {};
 for (i=0; i<form.elements.length;i++) {
  var item=form.elements[i];
  array[item.name]=item.value;
 }
 return JSON.stringify(array);
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.