Hi, if you want submit your form with Ajax, You can easily do this with jQuery form plugin and couple line of code.

ajaxSubmit

In javascript window add this:

In html formLayout add modify to this:

Dear, czareknster.

This solution does not work Maybe I need to modify some lines in the default formplugin.js?

Can you help me with more info about AJAX submit in RSForm PRO?

Hi all,

I need help too, i tried to follow this solution but i was unable to make it work.
I have a "slidding" vertical website and it's really anoying to refresh the page after submiting the form.

Regards,
Miguel Braga

Hey there,

You can grab the plugin here: github.com/malsup/form/

Just as a test I'd advise you create a basic form with a single text field and a submit button.

Once you have uploaded the plugin to your website link it in to the form by going inside that form then:

Properties
-> CSS and Javascript

then inside the Javascript part have something like:

<script src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="www.yoursite.com/*changethis*/jquery.form.js"></script>

<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>

Then go to the FormLayout and Turn Off the Auto Generate Layout

Replace {error} at the top with:

<div class="my-message"></div>
<div class="componentheading">{global:formtitle}</div>
<div class="message-load">{error}</div>

Now save the form and preview it.

From here when you hit submit it should submit the form but the page doesn't refresh.

So just to be sure it worked... check your submissions for that form.

For me my submissions updated correctly so great plugin!

in case if you want to show thx message, then you should do the following:
insted of this


you should use this

Missing code from above:

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


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

if($('.message-load').find('div').is(':hidden')) {
$('.my-message').html('THX Message');
}

And this still didn't work for me. Think becuase I'm calling mine from inside a slider.