Hide the RSForm form when submitted

Question

I have this AJAX code which successfully shows the "loading.." message when submitted in RSForm.

I want to hide the form when the user clicks the submit button. How should I go about editing in this 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>

I believe we must add something to pre-submit callback but I don't know how. I want to hide the form and show them a "thank you" message when somebody clicks the submit button

Jai · Answer 1 · 2016-05-17T04:42:03.637

You can use .ajaxStart() method:

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

Or add the two lines in these functions:

// 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.
}

score 0 · Answer 2 · edited May 23 '17 at 11:44

Not able to make out when you say RSForm. Presuming you are referring to same 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;
    });
    });

Note:This id="Join Newsletter" may not be a valid value for id attribute. You can check this LINK to know more about valid values.

Hide the RSForm form when submitted

2 Answers2