2016-05-17 61 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了解更多关于有效值的信息。