Question

我有这个AJAX代码，它在RSForm中提交时成功显示“loading ..”消息。

我想在用户点击提交按钮时隐藏表单。我应该如何在这个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="you@email.com" 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>

我相信我们必须添加一些东西来预先提交回调，但我不知道如何。当有人点击提交按钮

时，我想隐藏表单并向他们显示“谢谢”消息

Answer 1

您可以使用.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.
}

Answer 2

当你说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以了解有关有效值的详情。

提交时隐藏RSForm表单

2 个答案: