PHP - Limpiar formulario después de enviar datos.

   
Vista:

Limpiar formulario después de enviar datos.

Publicado por Wellington (3 intervenciones) el 29/03/2018 08:39:05
¡Muy buenas!

Esta vez os quería preguntar si sabe alguien que debo añadir a mi código para que tras recoger los datos en mi formulario, el mismo se "Resetee"

Así es como tengo mi código Html y Php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<form id="contact_body" method="post" action="contact_me.php">
        <label for="name"><span>Nombre: <span class="required">*</span></span>
            <input type="text" name="name" data-required="true"/>
        </label>
        <label for="email"><span>Correo: <span class="required">*</span></span>
            <input type="email" name="email" data-required="true"/>
        </label>
          <label for="puesto"><span>Puesto solicitado: <span class="required">*</span></span>
            <input type="puesto" name="puesto" data-required="true"/>
        </label>
        <label><span>Teléfono: <span class="required">*</span></span>
 
            <input type="number" name="phone2" maxlength="15" data-required="true"/>
        </label>
 
        <label><span>Currículum: <span class="required">*</span></span>
            <input type="file" name="file_attach[]" multiple/>
        </label>
 
        <label for="message"><span>Mensaje: <span class="required">*</span></span>
            <textarea name="message" data-required="true"></textarea>
        </label>
        <label><span>&nbsp;</span>
            <button type="submit">Enviar</button>
        </label>
    </form>
</div>
 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var allowed_file_size   = "2097152"; //1 MB allowed file size
var allowed_file_types  = ['image/png', 'image/gif', 'image/jpeg', 'image/pjpeg', 'application/x-zip-compressed', 'application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']; //Allowed file types
var border_color        = "#C2C2C2"; //initial input border color
var maximum_files       = 2; //Maximum number of files allowed
 
$("#contact_body").submit(function(e){
    e.preventDefault(); //prevent default action
    proceed = true;
 
    //simple input validation
    $($(this).find("input[data-required=true], textarea[data-required=true]")).each(function(){
            if(!$.trim($(this).val())){ //if this field is empty
                $(this).css('border-color','red'); //change border color to red
                proceed = false; //set do not proceed flag
            }
            //check invalid email
            var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
                $(this).css('border-color','red'); //change border color to red
                proceed = false; //set do not proceed flag
            }
    }).on("input", function(){ //change border color to original
         $(this).css('border-color', border_color);
    });
 
    //check file size and type before upload, works in modern browsers
    if(window.File && window.FileReader && window.FileList && window.Blob){
        var total_files_size = 0;
        if(this.elements['file_attach[]'].files.length > maximum_files){
            alert( "Can not select more than "+maximum_files+" file(s)");
            proceed = false;
        }
        $(this.elements['file_attach[]'].files).each(function(i, ifile){
            if(ifile.value !== ""){ //continue only if file(s) are selected
                if(allowed_file_types.indexOf(ifile.type) === -1){ //check unsupported file
                    alert( ifile.name + " Archivos sopotados: Word, PDF y JPG");
                    proceed = false;
                }
             total_files_size = total_files_size + ifile.size; //add file size to total size
            }
        });
       if(total_files_size > allowed_file_size){
            alert( "Máximo permitido 2MB");
            proceed = false;
        }
    }
 
    //if everything's ok, continue with Ajax form submit
    if(proceed){
        var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = new FormData(this); //Creates new FormData object
 
        $.ajax({ //ajax form submit
            url : post_url,
            type: request_method,
            data : form_data,
            dataType : "json",
            contentType: false,
            cache: false,
            processData:false
        }).done(function(res){ //fetch server "json" messages when done
            if(res.type == "error"){
                $("#contact_results").html('<div class="error">'+ res.text +"</div>");
            }
            if(res.type == "done"){
                $("#contact_results").html('<div class="success">'+ res.text +"</div>");
            }
        });
    }
});
</script>

Estoy empezando en el mundo del Php y el Javascript.

He buscado en Google, pero no entiendo bien lo que hay que hacer y lo que sí entiendo no funciona.

Adjunto captura del formulario para que veáis como queda tras enviar los datos.

Me gustaría que quedase limpio una vez me envíe los datos.

Limpiar_FORM

Un saludo y muchas gracias a tod@s. :-)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de jose carlos

Limpiar formulario después de enviar datos.

Publicado por jose carlos (48 intervenciones) el 30/03/2018 20:59:39
en tu boton
1
<button type="submit">Enviar</button>

reemplazalo por este

1
<input type="submit" value="Enviar">

y aqui en donde sueltas el mensaje

1
2
3
if(res.type == "done"){
    $("#contact_results").html('<div class="success">'+ res.text +"</div>");
}

agregale esto
1
2
3
4
5
6
if(res.type == "done"){
    $("#contact_results").html('<div class="success">'+ res.text +"</div>");
    ob_start();
    header("url = contact_me.php");
    ob_end_flush();
}

Espero que te sirva.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

Limpiar formulario después de enviar datos.

Publicado por Wellington wellbritto@outlook.es (3 intervenciones) el 31/03/2018 08:39:20
Hola @jose carlos.

Me ha servido tu ayuda para aprender un poco más, pero creo que no es lo que quiero o eso creo.

Lo que quiero es el formulario se limpie una vez envié el visitante de la página sus datos. (Adjunto captura de lo que quiero.)

FORM_vacio


Espero haberme explicado mejor ahora.

Ojalá alguien sepa como hacerlo. :-)

Un saludo y muchas gracias por tu ayuda.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de santi

Limpiar formulario después de enviar datos.

Publicado por santi (139 intervenciones) el 31/03/2018 16:16:44
Hola,

deja los campos en blanco con jQuery:

1
$('input').val("");//todos los inputs quedarán vacíos ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

Limpiar formulario después de enviar datos.

Publicado por italo (110 intervenciones) el 31/03/2018 18:58:05
hola

puedes probar:

de esto:

1
2
3
if(res.type == "done") {
   $("#contact_results").html('<div class="success">'+ res.text +"</div>");
}

a esto:

1
2
3
4
5
6
if(res.type == "done") {
   $("#contact_results").html('<div class="success">'+ res.text +"</div>");
 
   //reset del form
   //aqui el codigo
}

cambias:

1
//aqui el codigo

con:

1
$("#id_form")[0].reset();

o

1
$('#id_form').get(0).reset();

o

1
$('form').trigger("reset");

o

1
2
3
4
5
$(':input','#id_form')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

esos son los basicos.

salu2
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Revisar política de publicidad