提交后将表单（提示）恢复到初始状态

Question

我在html中有一个表单。我正在使用Label Over plugin将输入元素的标签显示为提示。我使用AJAX提交信息，而无需刷新页面到PHP页面并返回成功/错误消息。所有这些东西到目前为止工作正常。

问题是，一旦我提交表单并收到成功消息，我的输入元素提示消失。没有提示，用户不能提交其他反馈，如果他们想这样做，因为输入框是空白的。唯一的选择是刷新整个页面。我试图避免这一点。 我只想显示标签原样，当用户最初第一次访问该页面时。

在成功功能中，您会看到我的评论为//如何在此恢复标签???????这就是我试图将提示分配回去的地方，因为他们之前在页面加载时，提示不会出现。我试图在执行成功时显示这些提示，以便用户可以再次填写信息&再次提交，而无需重新加载页面。

下面的形式：

<form id="frm_contact" name="frm_contact" method="post" action="ajax_contact.php"> 



      <div class="label"> 
      <label class="pre" for="name">Enter Name</label> 
       <input name="name" type="text" id="name" size="42" title="Enter Name" /> 
      </div>    




      <div class="label"> 
      <label class="pre" for="email">Enter Email</label> 
       <input name="email" type="text" id="email" size="42" title="Enter Email" /> 
      </div>    




     <select name="regarding" id="regarding" style="width: 295px;"> 
      <option value="">Select a value</option> 
      <option value="Comment">Comment</option> 
      <option value="Compliment">Compliment</option> 
      <option value="Suggestion">Suggestion</option> 
      <option value="Other">Other</option> 
      </select> 




      <div class="label"> 
      <label class="pre" for="comments">Comments</label> 
      <textarea name="comments" id="comments" cols="34" rows="5" ></textarea> 
      </div> 




     <div id="wrap"> 
       <img src="get_captcha.php" alt="" id="captcha" name="captcha" /> 

       <img src="images/refresh.gif" alt="Refresh Code" name="refresh" width="48" height="44" id="refresh" title="Refresh Code" /> 
      </div>     




      <div class="label"> 
      <label class="pre" for="security_code">Enter Security Code as shown above</label> 
      <input name="security_code" type="text" id="security_code" size="42" title="Enter Security Code as shown above" /> 
      </div> 



      <input name="sbt_contact" type="image" id="sbt_contact" src="images/btn_send.jpg" alt="Send" /> 
</form> 

这里是JavaScript：

<script type="text/javascript"> 
// <![CDATA[  
$('label.pre').labelOver('over'); 

// $(document).ready() is executed after the page DOM id loaded 
$(document).ready(function(){ 

    //Hide loading & success divs by default 
    $('#loading').hide(); 
    $('#result_succcess').hide(); 

    // Binding an listener to the submit event on the form: 
    $('#frm_contact').submit(function(e){ 

     if($('#sbt_contact').hasClass('active')) return false;    

     // Adding the active class to the button. Will show the preloader gif: 
     $('#sbt_contact').addClass('active'); 

     // Removing the current error tooltips 
     $('.errorTip').remove(); 

     //Show loading icon 
     $('#loading').show(); 

     //Prepare data to be sent 
     var dataString = $('#frm_contact').serialize()+'&fromAjax=1'; 

     $.ajax({ 

      type: "POST", 
      url: "ajax_contact.php", 
      data: dataString, 
      dataType: 'json', 

      success: (function(response) 
      { 
       //If no error was found, then clear the entered input 
       if(response.error == 0)    
       { 
        /*Completely reset the form if the form is successfully submitted*/ 
        $(':input','#frm_contact') 
        .not(':button, :submit, :reset, :hidden, :image') 
        .val('') 
        .removeAttr('checked') 
        .removeAttr('selected'); 

        //How to Restore labels here??????? 
        //Using the following here, does not restore the labels 
        $('label.pre').labelOver('over'); 


        //Remove all the success class for the form elements 
        $('#frm_contact :input').removeClass('success'); 

        /*Reset Captcha.*/ 
        $("img#refresh").trigger('click'); 

        //Show the success box and fade it out after a delay of 10 seconds     
        $('#result_succcess').html('Your feedback has been successfully received. We will get back in touch with you shortly.').fadeIn('slow').delay(10000).fadeOut(400);   

       } 
       else 
       {     

        //Remove all the success class that has been previously assgined & do it freshly again 
        $('#frm_contact :input').removeClass('success'); 

        // Looping through all the input text boxes, 
        // and checking whether they produced an error 
        $('#frm_contact input[type!=submit], #frm_contact input[type!=image], #frm_contact select, #frm_contact textarea, #frm_contact input[type=textarea]').each(function(){ 

        var elem = $(this); 
        //var id = elem.attr('id'); 
        var ele_name = $(this).attr('name');           
        var ele_type = $(this).attr('type');         

        //For the errors received, show errors 
        if(response.message[ele_name]) 
        { 
         alert('errors'); 
        } 
        else 
        { 

         if(ele_name != 'sbt_contact' && ele_name != 'refresh' && ele_name != 'captcha') 
         { 
          alert(ele_name);        
         }     
        } 
       }); 


       } 
      })   

     });     

     //hide loading icon 
     $('#loading').hide(); 
     e.preventDefault(); 

    }); 

}); 
// ]]> 
</script>  

Answer 1

看给ajaxForm，特别resetForm和clearForm

http://jquery.malsup.com/form/#options-object