4

Hola tengo un formulario de contacto el cual, después de enviar el mensaje con éxito, queda abierto con el mensaje que escribió el cliente y si se vuelve a dar al botón ENVIAR, lo reenvía una y otra vez. ¿ Como puedo corregir esto? ¿ Que debo hacer para que el formulario quede en blanco después hacerlo enviado y a si evitar que se envié de nuevo? He buscado información de como hacerlo con AJAX, pero mis conocimientos en javascript son escasos y no se donde añadir un .reset(); que por lo que he leído en (alguna otra pregunta) similar, es como podría limpiar el formulario. He probado a ponerlo en varias partes del código, pero no funciona Les muestro el código que tengo para que puedan ver los errores que tiene. Como les digo, no se donde ni que debo poner exactamente. Sigo buscando soluciones en otras preguntas, pero cada vez estoy liando más el código sin ninguna solución. Gracias

//  -************** CODIGO PHP ************  //

<?php

/***************** Configuration *****************/

$contact_email_to = "[email protected]";
$contact_subject_prefix = "Mensaje de formulario de contacto: ";
$contact_error_name = "¡El nombre es demasiado corto o vacío!";
$contact_error_email = "Por favor, introduzca un email valido";
$contact_error_subject = "El tema es demasiado corto o vacío!";
$contact_error_message = "Mensaje demasiado corto! Por favor, introduzca algo.";

/********** Do not edit from the below line ***********/

if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
  die('Sorry Request must be Ajax POST');
}

if(isset($_POST)) {

  $name = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
  $email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
  $subject = filter_var($_POST["subject"], FILTER_SANITIZE_STRING);
  $message = filter_var($_POST["message"], FILTER_SANITIZE_STRING);

  if(strlen($name)<4){
    die($contact_error_name);
  }

  if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
    die($contact_error_email);
  }

  if(strlen($message)<3){
    die($contact_error_subject);
  }

  if(strlen($message)<3){
    die($contact_error_message);
  }

  if(!isset($contact_email_from)) {
    $contact_email_from = "contactform@" . @preg_replace('/^www\./','', $_SERVER['SERVER_NAME']);
  }

  $sendemail = mail($contact_email_to, $contact_subject_prefix . $subject, $message,
    "From:  $name <$contact_email_from>" . PHP_EOL .
    "Reply-To: $email" . PHP_EOL .
    "X-Mailer: PHP/" . phpversion()
  );

  if( $sendemail ) {
    echo 'OK';
  } else {
    echo 'No se pudo enviar el correo! Por favor, compruebe su configuración de correo PHP.';
  }
}
?>

////////////////////////////////////////////

// ***********  CODIGO   JAVASCRIPT ********* //


jQuery(document).ready(function($) {
"use strict";

    //Contact
    $('form.contactForm').submit(function(){

        var f = $(this).find('.form-group'), 
        ferror = false, 
        emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;

        f.children('input').each(function(){ // run all inputs

            var i = $(this); // current input
            var rule = i.attr('data-rule');

            if( rule !== undefined ){
            var ierror=false; // error flag for current input
            var pos = rule.indexOf( ':', 0 );
            if( pos >= 0 ){
                var exp = rule.substr( pos+1, rule.length );
                rule = rule.substr(0, pos);
            }else{
                rule = rule.substr( pos+1, rule.length );
            }
            
            switch( rule ){
                case 'required':
                if( i.val()==='' ){ ferror=ierror=true; }
                break;
                
                case 'minlen':
                if( i.val().length<parseInt(exp) ){ ferror=ierror=true; }
                break;

                case 'email':
                if( !emailExp.test(i.val()) ){ ferror=ierror=true; }
                break;

                case 'checked':
                if( !i.attr('checked') ){ ferror=ierror=true; }
                break;
                
                case 'regexp':
                exp = new RegExp(exp);
                if( !exp.test(i.val()) ){ ferror=ierror=true; }
                break;
            }
                i.next('.validation').html( ( ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '' ) ).show('blind');
            }
        });
        f.children('textarea').each(function(){ // run all inputs

            var i = $(this); // current input
            var rule = i.attr('data-rule');

            if( rule !== undefined ){
            var ierror=false; // error flag for current input
            var pos = rule.indexOf( ':', 0 );
            if( pos >= 0 ){
                var exp = rule.substr( pos+1, rule.length );
                rule = rule.substr(0, pos);
            }else{
                rule = rule.substr( pos+1, rule.length );
            }
            
            switch( rule ){
                case 'required':
                if( i.val()==='' ){ ferror=ierror=true; }
                break;
                
                case 'minlen':
                if( i.val().length<parseInt(exp) ){ ferror=ierror=true; }
                break;
            }
                i.next('.validation').html( ( ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '' ) ).show('blind');
            }
        });
        if( ferror ) return false; 
        else var str = $(this).serialize();		
            $.ajax({
                type: "POST",
                url: "contactform/contactform.php",
                data: str,
                success: function(msg){
                   // alert(msg);
                    if(msg == 'OK') {
                        $("#sendmessage").addClass("show");			
                        $("#errormessage").removeClass("show");	
                    }
                    else {
                        $("#sendmessage").removeClass("show");
                        $("#errormessage").addClass("show");
                        $('#errormessage').html(msg);
                    }
                    
                }
            });
        return false;
    });

});
<!DOCTYPE html>
<html lang="en">
<body>
<section id="contact-page">
    <div class="container">
      <div class="center">
        <h2>Deje su mensaje</h2>
        <p class="lead">Deje su mensaje con sus ideas y veremos que es lo mejor para usted y su negocio.</p>
      </div>
      <div class="row contact-wrap">
        <div class="col-sm-8 col-sm-offset-2">
          <div id="sendmessage">Your message has been sent. Thank you!</div>
          <div id="errormessage"></div>
          <form action="" method="post" role="form" class="contactForm">
            <div class="form-group">
              <input type="text" name="name" class="form-control" id="name"  placeholder="Nombre" data-rule="minlen:4" data-msg="Por favor ingrese al menos 4 caracteres" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <input type="email" class="form-control" name="email" id="email"   placeholder="Email" data-rule="email" data-msg="Por favor introduzca una dirección de correo electrónico válida" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="subject" id="subject"  placeholder="Tema" data-rule="minlen:4" data-msg="Por favor ingrese al menos 8 caracteres del tema" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Por favor escribe algo para nosotros" placeholder="Mensaje"></textarea>
              <div class="validation"></div>
            </div>
            <input type="checkbox" name="acceptPolicies" required="required" value="acceptPolicies" /> He leído y acepto su <a href="privacidad.html" target="_blank">Política de Privacidad</a>
            <div class="text-center"><button type="submit" class="btn btn-primary btn-lg">Enviar</button></div>
          </form>
        </div>
      </div>
      <!--/.row-->
    </div>
    <!--/.container-->
  </section>
</body>
</html>

3 respuestas 3

4

Puede colocar un código JQuery que limpie los campos cuando se ejecuta el ajax correctamente. Puedes poner una clase común para todos los campos del formulario o utilizar la clase 'form-control' que creo que ya la usas para todos. Ejemplo $(".form-control").val("") y eso es todo, el valor (val) se limpiará porque pusiste unas comillas vacías.

2
  • 1
    Gracias por el aporte @DenisRonda, pero mis conocimientos en javascript son nulos, no se como ni donde poner lo que usted me sugiere. Gracias
    – Diana
    Commented el 25 feb. 2019 a las 11:13
  • 1
    En tu estructura HTML hay unas etiquetas <head></head> dentro de esas etiquetas tendrás que agregar las siguientes <script>aquí va el código JS</script> o puedes crear un archivo .js y llamarlo así <script src="archivo.js"></script> Commented el 25 feb. 2019 a las 16:42
2

Usamos tu definicion de var f = $(this)

La declaramos despues de ser success dentro del if cuando sea OK Con esto resolverias

 $.ajax({
                type: "POST",
                url: "contactform/contactform.php",
                data: str,
                success: function(msg){
                   // alert(msg);
                    if(msg == 'OK') {
                        $("#sendmessage").addClass("show");         
                        $("#errormessage").removeClass("show");
                        f[0].reset(); //con esto le decimos que si todo esta bien, ponga todos los campos en blanco.
                    }
                    else {
                        $("#sendmessage").removeClass("show");
                        $("#errormessage").addClass("show");
                        $('#errormessage').html(msg);
                    }

                }
            });
        return false;
    });
1
  • Gracias @Y1LY , pero me dice lo mismo que con la respuesta del otro usuario: Me dice que resect no es una funcion: contactform.js:91 Uncaught TypeError: $(...).reset is not a function –
    – Diana
    Commented el 25 feb. 2019 a las 18:42
2

Si lo que deseas es resetear el formulario a su estado actual, utiliza simplemente la función reset de Javascript: Dado el código que ya tienes, te recomiendo que lo coloques en el condicional de success:

 success: function(msg){
     $(".form-control").get(0).reset();
     if(msg == 'OK') {
        ....
     }

Otra opción es colocarlo luego del if( 'OK' ), de forma que lo resetee solo si fue bien:

 success: function(msg){
     if(msg == 'OK') {
         $(".form-control").get(0).reset();
         ...
     }
6
  • Gracias @!Mangas, pero como veras, ya le dije al compañero anterior, que no se en que parte del código debo colocar lo que me sugieres para que funcione, mi conocimiento de javascript es nulo. Si usted lo coloca en el lugar que debe ir en mi formulario y funciona, le daré la respuesta por buena. Gracias
    – Diana
    Commented el 25 feb. 2019 a las 12:29
  • 2
    Edito mi respuesta, para que quede más claro!
    – iMangas
    Commented el 25 feb. 2019 a las 12:38
  • Gracias @!Mangas, no funciona
    – Diana
    Commented el 25 feb. 2019 a las 13:02
  • 1
    Te da algún error? Puedes verlo en la consola del navegador (puedes abrirlo con F12)
    – iMangas
    Commented el 25 feb. 2019 a las 14:17
  • 1
    @diana, hice un pequeño cambio en el código, así te debería funcionar sin problemas. Te dejo un ejemplo funcionando con tu formulario (aunque sin tu javascript), le agregué un botón llamado Reset. codepen.io/anon/pen/XGJmYo
    – iMangas
    Commented el 26 feb. 2019 a las 13:31

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.