提交后将表单(提示)恢复到初始状态


Restore form(hints) to initial state after submit

我有一个html格式的表单。我使用LabelOver插件将输入元素的标签显示为提示。我使用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>     

查看ajaxForm,特别是resetForm和clearForm

http://jquery.malsup.com/form/#options-对象