javascript jquery ajax

jasne wartości formularza po przesłaniu Ajax

Używam następującego skryptu, aby zweryfikować mój formularz kontaktowy.

//submission scripts

 $('.contactForm').submit( function(){

//statements to validate the form 

 var filter =/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

 var email = document.getElementById('e-mail');

 if (!filter.test(email.value)) {

 $('.email-missing').show();

 } else {$('.email-missing').hide();}

 if (document.cform.name.value == "") {

 $('.name-missing').show();

 } else {$('.name-missing').hide();}  if (document.cform.phone.value == "") {

 $('.phone-missing').show();

 } 

 else if(isNaN(document.cform.phone.value)){

 $('.phone-missing').show();

 }

 else {$('.phone-missing').hide();}  if (document.cform.message.value == "") {

 $('.message-missing').show();

 } else {$('.message-missing').hide();}  if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "") || isNaN(document.cform.phone.value)){

 return false;

 }  if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {

//hide the form

//$('.contactForm').hide();//show the loading bar

 $('.loader').append($('.bar'));

 $('.bar').css({display:'block'});/*document.cform.name.value = '';

 document.cform.e-mail.value = '';

 document.cform.phone.value = '';

 document.cform.message.value = '';*///send the ajax request

 $.post('mail.php',{name:$('#name').val(),

 email:$('#e-mail').val(),

 phone:$('#phone').val(),

 message:$('#message').val()},//return the data

 function(data){//hide the graphic

 $('.bar').css({display:'none'});

 $('.loader').append(data); });//waits 2000, then closes the form and fades out

//setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000);//stay on the page

 return false;

 } 

 });

To jest moja forma

<form action="mail.php" class="contactForm" id="cform" name="cform" method="post">

 <input id="name" type="text" value="" name="name"/>

 

 <span class="name-missing">Please enter your name</span>

 <input id="e-mail" type="text" value="" name="email"/>

 

 <span class="email-missing">Please enter a valid e-mail</span>

 <input id="phone" type="text" value="" name="phone"/>

 

 <span class="phone-missing">Please enter a valid phone number</span>

 <textarea id="message" rows="" cols="" name="message"></textarea>

 

 <span class="message-missing">Please enter message</span>

 <input class="submit" type="submit" name="submit" value="Submit Form"/>

</form>

Muszę wyczyścić wartości pól formularza po pomyślnym przesłaniu. W jaki sposób mogę to zrobić?

Zaproszony:

11 odpowiedzi

Anonimowy użytkownik

Potwierdzenie od:

$("#cform")[0].reset();

lub po prostu javascript:

document.getElementById("cform").reset();

Anonimowy użytkownik

Potwierdzenie od:

Możesz to zrobić wewnątrz swojego $ .Post wywołuje wywołanie zwrotne sukcesu w ten sposób

$.post('mail.php',{name:$('#name').val(),

 email:$('#e-mail').val(),

 phone:$('#phone').val(),

 message:$('#message').val()},//return the data

 function(data){//hide the graphic

 $('.bar').css({display:'none'});

 $('.loader').append(data);//clear fields

 $('input[type="text"],textarea').val(''); });

Anonimowy użytkownik

Potwierdzenie od:

Użyj tego:

$('form.contactForm input[type="text"],texatrea, select').val('');

lub jeśli masz link do formularza z

this

$('input[type="text"],texatrea, select', this).val('');

: input

===

& < input & >

& < select & >

х +

& < textarea & >

Anonimowy użytkownik

Potwierdzenie od:

$('.contactForm').submit(function(){

 var that = this;//...more form stuff... $.post('mail.php',{...params...},function(data){//...more success stuff... that.reset();

 });

});

Anonimowy użytkownik

Potwierdzenie od:

Właśnie

$('#cform')[0].reset();

Anonimowy użytkownik

Potwierdzenie od:

$.post('mail.php',{name:$('#name').val(),

 email:$('#e-mail').val(),

 phone:$('#phone').val(),

 message:$('#message').val()},//return the data

 function(data){

 if(data==<when do you want to clear the form>){ $('#<form Id>').find(':input').each(function() {

 switch(this.type) {

 case 'password':

 case 'select-multiple':

 case 'select-one':

 case 'text':

 case 'textarea':

 $(this).val('');

 break;

 case 'checkbox':

 case 'radio':

 this.checked = false;

 }

 });

 } 

 });

http://www.electrictoolbox.com/jquery-clear-form
http://www.electrictoolbox.com/jquery-clear-form/
/

Anonimowy użytkownik

Potwierdzenie od:

to działa: wywołaj tę funkcję po pomyślnym zakończeniu procesu AJAX i prześlij swój identyfikator formularza jako parametr. coś w tym stylu:

Ta funkcja usuwa wszystkie wartości pól wejściowych, w tym przycisk, Prześlij, resetowanie, pola ukryte

function resetForm(formid) {

 $('#' + formid + ' :input').each(function(){ 

 $(this).val('').attr('checked',false).attr('selected',false);

 });

}

* Ta funkcja usuwa wszystkie wartości pól wejściowych z wyjątkiem przycisków, przesyłania, resetowania i ukrytych pól
* */

function resetForm(formid) {

 $(':input','#'+formid) .not(':button, :submit, :reset, :hidden') .val('')

 .removeAttr('checked') .removeAttr('selected');

 }

próba:

<script>

 (function($){

 function processForm( e ){

 $.ajax({

 url: 'insert.php',

 dataType: 'text',

 type: 'post',

 contentType: 'application/x-www-form-urlencoded',

 data: $(this).serialize(),

 success: function( data, textStatus, jQxhr ){

 $('#alertt').fadeIn(2000);

 $('#alertt').html( data );

 $('#alertt').fadeOut(3000);

 resetForm('userInf');

 },

 error: function( jqXhr, textStatus, errorThrown ){

 console.log( errorThrown );

 }

 }); e.preventDefault();

 } $('#userInf').submit( processForm );

})(jQuery); function resetForm(formid) {

$(':input','#'+formid) .not(':button, :submit, :reset, :hidden') .val('')

 .removeAttr('checked') .removeAttr('selected');

 }

 </script>

Anonimowy użytkownik

Potwierdzenie od:

Ustaw identyfikator w formularzu podczas wysyłania formularza

<form action="" id="cform"> <input type="submit" name=""> </form> set in jquery  document.getElementById("cform").reset();

Anonimowy użytkownik

Potwierdzenie od:

$('#formid).reset();

lub

document.getElementById('formid').reset();

Anonimowy użytkownik

Potwierdzenie od:

Wanilia!
>
Wiem, że ten post jest dość stary.

Ponieważ OP używa jquery ajax, ten kod będzie potrzebny.

Ale dla tych, którzy szukają wanilii.

...

// Send the value

 xhttp.send(params);

// Clear the input after submission

 document.getElementById('cform').reset();

}

Anonimowy użytkownik

Potwierdzenie od:

Korzystając z metody ajax reset (), możesz wyczyścić formularz po przesłaniu
przykład z twojego skryptu powyżej:
stała forma = document.getElementById (cform) .reset ();

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się

jasne wartości formularza po przesłaniu Ajax

11 odpowiedzi

Powiązane pytanie

Stan problemu

jasne wartości formularza po przesłaniu Ajax

Linki dotyczące treści

11 odpowiedzi

Powiązane pytanie

Stan problemu