提交时隐藏 RSForm 表单答案

【问题标题】：Hide the RSForm form when submitted提交时隐藏 RSForm 表单
【发布时间】：2016-05-17 12:42:03
【问题描述】：

我有这个 AJAX 代码，它在 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="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>

我相信我们必须在预提交回调中添加一些内容，但我不知道如何。当有人点击提交按钮时，我想隐藏表单并向他们显示“谢谢”消息

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

当您说 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 以了解有关有效值的更多信息。

【讨论】：

【解决方案2】：

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

【讨论】：