2016-05-17 93 views
0

我有這個AJAX代碼,它在RSForm中提交時成功顯示「正在加載..」消息。提交時隱藏RSForm表格

我想在用戶點擊提交按鈕時隱藏表單。我應該如何去編輯這個JavaScript?

<script> 
jQuery(function($){ 
$(document).ready(function() { 
var options = { 
beforeSubmit: showRequest, 
success: showResponseAll 
}; 

// bind to the form's submit event 
$('#userForm').submit(function() { 
$(this).ajaxSubmit(options); 
return false; 
}); 
}); 

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
$('.my-message').html("Loading...."); 
return true; 
} 

// post-submit callback 
function showResponseAll(responseText, statusText, xhr, $form) { 
var $response = $(responseText); 
var comon = $response; 
var dane = comon.find('.message-load') 
$('.my-message').html(dane); 
} 

}); 
</script> 

<form method="post" id="userForm" action="URL"><div class="my-message"></div> 
<div class="message-load"><div id="rsform_error_3" style="display: none;"><p class="formRed">Please complete all required fields!</p></div></div> 
<fieldset class="form-horizontal formContainer" id="rsform_3_page_0"> 
    <div class="form-group rsform-block rsform-block-email"> 
     <div class="col-xs-12 formControls"> 
      <input type="text" value="" size="20" placeholder="[email protected]" name="form[Email]" id="Email" class="rsform-input-box form-control rsform-input-box"> 
      <span class="formValidation"><span id="component27" class="formNoError">Please let us know your email address.</span></span>   
     </div> 
     <div class="col-xs-12"> 
      <button type="submit" name="form[Join Newsletter]" id="Join Newsletter" class="rsform-submit-button btn btn-primary">Join Newsletter</button>  
     </div> 
    </div> 
</fieldset> 
<input type="hidden" name="form[formId]" value="3"> 
</form> 

我相信我們必須添加一些預先提交的回調,但我不知道如何。我想隱藏的形式,向他們展示了「謝謝你」的消息有人點擊時提交按鈕

回答

0

您可以使用.ajaxStart()方法:

$(document).ajaxStart(function(){ 
    $('#userForm').hide(); 
    $('#userForm').find('.my-message').html("Thank You!!!"); 
}); 

或者在這些功能中添加兩行:

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    $('.my-message').html("Loading...."); 
    $('#userForm').hide(); // <------------hide it here 
    return true; 
} 

// post-submit callback 
function showResponseAll(responseText, statusText, xhr, $form) { 
    var $response = $(responseText); 
    var comon = $response; 
    var dane = comon.find('.message-load') 
    $('.my-message').html(dane); // <----i suppose this is Thank you message. 
} 
0

當你說RSForm時無法辨認出來。假設你是指同一userForm

$('#userForm').submit(function(event) { 
    //since making ajax call you have to prevent the default behavior that is submit 
    event.preventDefault(); 
    $('#userForm').hide(); 
    $(this).ajaxSubmit(options); 
    return false; 
    }); 
    }); 

注意:此id="Join Newsletter"可能不是id屬性的有效值。 你可以檢查這個LINK瞭解更多關於有效值的信息。