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 = "[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);
}

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
    Commented 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 = "[email protected]"; 
 $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 = "[email protected]"; 
 $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? Commented 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
    Commented el 29 mar. 2018 a las 2:00
  • checa lo que anexaré a la respuesta para decirte por que te aparece ese error
    – user75901
    Commented el 29 mar. 2018 a las 2:34
  • ok, estaré al tanto. Commented 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
    Commented 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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