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:
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.
Un saludo y muchas gracias a tod@s. :-)
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> </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.
Un saludo y muchas gracias a tod@s. :-)
Valora esta pregunta
0
