0

soy nuevo en esto y no se como enviar formulario con php y ajax, en mi statement en el else he usado tambien prevent default para que no se envie, simno que se envie mediante ajax, pero mi pregunta es, si hago prevent default, no se va a enviar, entonces como lo hago? Quiero que me salga una alerta con los errores insertados en el formulario y luego una alerta del else, con mis datos y con un mensaje que consigure en ph, la alerta y todo funciona pero no se como hacer para que el formulario se envie.

<?php
    header('Access-Control-Allow-Origin: *');

    $jsondata = array();

    $jsondata['saludo'] = '¡Hola '. $_POST['campoNombre'] . '!';

    $jsondata['telefono'] = 'Nos pondremos en contacto con ' .  $_POST['campoEmail'] . ' lo antes posible';


    header('Content-type: application/json; charset=utf-8');
    echo json_encode($jsondata);
    exit();



    if($_POST) {
        $to_Email       = "[email protected]"; // email de recepción
        $subject        = 'SOLICITUD DE CONTACTO'; // asunto

        // saneado de seguridad
        $user_Name        = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
        $user_Email       = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
        $user_Message     = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);

        // composición de email
        $headers = "MIME-Version: 1.0";
        $headers .= "Content-type: text/html; charset=charset=UTF-8";
        $headers .= 'From: SOLICITUD CONTACTO' . "\r\n" .
        'Reply-To: '.$user_Email.'' . "\r\n" .
        'X-Mailer: PHP/' . phpversion();

        $body = "Se ha recibido una nueva solicitud de contacto:"."\r\n";
        $body .= "Nombre: " . $user_Name ."\r\n";
        $body .= "Correo: " . $user_Email ."\r\n";
        $body .= "Mensaje: " . $user_Message ."\r\n";


        // envío de email
        $sentMail = @mail($to_Email, $subject, $body, $headers);   
    }

?>

$(document).ready(function(){
  function validacionFormulario(){
  $('form').on('submit', function(e){

    let nombre = $('#campoNombre').val();
    let email = $('#campoEmail').val();
    let telefono = $('#campoTelefono').val();
    let mensaje = $('#campoMensaje').val();

    if (nombre.length <= 2) {
      alertaError('El nombre es demasiado corto');
      e.preventDefault();
    }

    else if (email.includes('@') == false || email.includes('.') == false || email.indexOf('@') < 1 || email.indexOf('.') < 3) {
      alertaError('El email no es correcto');
      e.preventDefault();
    }
    else if (telefono.length < 9) {
      alertaError('El telefono debe tener al menos 9 numeros');
      e.preventDefault();
    }

    else if (mensaje.length <= 10) {
      alertaError('El mensaje es demasiado corto');
      e.preventDefault();
    }
    else{
      $.post({

        url:'http://www.asociacionaepi.es/curso_web/francisco/practica1/contact.php',

        data: $(this).serialize(),
        success: function(datos) {
          let texto = datos.saludo + ' ' + datos.telefono;
          msg(texto, 2);
        }
      });
    }

  });
}


//ERROR MSG
function alertaError(texto){
  $('#alerta p').text(texto);
  $('#alerta').addClass('visible');

  setTimeout(function(){
    $('#alerta').removeClass('visible');
  },3000);
}

// MSG

function msg(mensajes, tiempo) {

  $('#alerta p').text(mensajes);

  $('#alerta').addClass('visible');

  setTimeout( function(){
    $('#alerta').removeClass('visible');
  },tiempo * 2000);
}
})
#alerta {
  background: #8c8a8a;
  border: 1px solid black;
  border-radius: 2px;
  position: fixed;
  bottom: 100px;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}

#alerta.visible {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

#alerta p {
  color: black;
  line-height: 0;
  margin: 3px;
  font-size: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>my page</title>
  </head>
  <body>
    <form action="contact.php" method="post" id="formulario">
      <div class="row">

        <div class="col-sm-4">
          <input id="campoNombre" name="campoNombre" type="text" placeholder="Nombre...">
        </div>

        <div class="col-sm-4">
          <input id="campoEmail" name="campoEmail" type="text" placeholder="Email...">
        </div>
        <div class="col-sm-4">
          <input id="campoTelefono" name="campoTelefono" type="text" placeholder="Telefono...">
        </div>

        <div class="col-xs-12">
          <textarea id="campoMensaje" name="campoMensaje" type="text" placeholder="Mensaje..." rows="8" maxlength="999"></textarea>
        </div>

        <div class="col-xs-12">
          <input type="submit" value="Enviar" class="boton">
        </div>

      </div>

    </form>
  </body>
</html>

10
  • ¿Por que en el último else, en el que se envía el ajax, le indicas prevent default? el 19 feb. 2018 a las 17:05
  • eso me preguntaba yo, el profesor nos puso ese ejemplo, pero si l oquito me redirige a contacto php no? Claro yo l oque quiero es que no me redirija a ningun sitio. asi me aparece cada error cuando falla el nombre etc y tambien el mensaje de lo que configure en php, los datos de la persona etc, pero si le quito prevent default ira a otro sitio no? igual lo quite antes y seguia sin enviar nada =( me podrias ayudar? Muchas gracias el 19 feb. 2018 a las 17:58
  • Realmente utilizar AJAX es precisamente para eso, para procesar datos desde el lado del servidor sin tener que recargar la página para que se muestren en nuestra página. Por lo tanto, llamarás al PHP pero no se te recargará la página si no que te enviará la información que le mandes de vuelta desde el PHP al Javascript al apartado de success. el 19 feb. 2018 a las 18:00
  • Ya eso pensaba yo pero me sale The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. y en una pagina diferente y sin enviarse nada el 19 feb. 2018 a las 18:08
  • devolver me devolvia lo que le pasaba al nombre email etc en la alerta eso estaba bien cuando tenia prevent default ahora me manda a contact.php y sale eso en la consola, quiero que se quede donde esty en pa pagina, igual no envia ningun email... mmm nose como va eso de xmapp etc, solo tebgo esto en php y js hace falta algo mas? serialize() era para procesar la informacion de los inputs no? el 19 feb. 2018 a las 18:12

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.