Submit forms via AJAX

If the form is a poll, then it'll be cool to have the results show instantly as well, on the same page, or replacing the space previously occupied by the poll options?

ok how can i submit a form via ajax?

It's not yet an option. That's why the feature is on the suggestions list for voting.

If this feature does get included in a future release please make sure it has options for callbacks and most if not all of there options: http://jquery.malsup.com/form/#options-object

Is there any eta yet? It would improve the usability of the forms a lot.

Ya guys lets get this going, we all need it!

I would pay extra for this as an add on... I think this feature would really complete FormidblePro.

Ajax submit is currently scheduled for version 1.8.0 This could get pushed up or back depending on the voting in the suggestions section, but it is definitely going to be added in a future release.

Hi Formidable Community,

(UPDATE: note, if you're using Formidable 1.06.04 or higher, please read this, then see my update two notes down)

I just came across a case where I needed to be able to submit the form via AJAX.  The form is within a modal dialog and I didn't want to have to close the dialog to be able to submit the form.  I was able to do it fairly simply.  There are two pieces - the javascript, and the php (in WordPress).

JAVASCRIPT:
Let's, for simplicity sake, say your form isn't in a modal dialog, but is rendered on the page itself.  You need some Javascript like this:

jQuery(function($){
// First, Define a function to handle the AJAX submission. I'll pass in the Form ID
myAjaxSubmit = function(id){
// Add an input for 'action' - required by the WordPress AJAX API
$form.append($('<input type="text" />').attr({
type: 'hidden',
name: 'action',
value: 'frm_submit_form'
}));

// Note, because we're on the front end, I've had to define ajaxurl manually
// I did it in wp_print_scripts by echoing admin_url('admin-ajax.php')
$.post(ajaxurl,$form.serialize(),function(data){
// Just replace .frm_forms with what's returned
// See the PHP code to understand what gets returned
$form.parents('.frm_forms').html($(data).html());
});
}

// Make it so the submit action is my own function
var $form = $('#my-form-id');
$form.attr('action','javascript:myAjaxSubmit("'+$form.attr('id')+'")');
}

PHP
Within your functions.php, you'll need something like this:

add_action('wp_ajax_frm_submit_form','my_frm_submit_form');
add_action('wp_ajax_nopriv_frm_submit_form','my_frm_submit_form');
function my_frm_submit_form(){
// Will create the entry and echo a message, or the form,
// according to the form's settings
echo FrmEntriesController::show_form($_POST['form_id']);
die();
}

The end result is that the form is submitted via AJAX and the div.frm_forms that contained the original form is replaced by the output generated by Formidable. This setup still works with Formidable's AJAX form validation.

I didn't test it for a complicated form with pages or file uploads. My suspicion is that it would need tweaking, but for a simple form, this just might do your trick.

Cheers
Trevor Mills
topquark.com
------------
Check out Formidable Plus - adds a Table field type to Formidable Pro - topquark.com/extend/plugins/formidable-plus

We are considering adding Ajax submit for basic forms (forms that don't contain Rich text editor fields or file upload fields) in 1.6.5. Then expanding the functionality to all forms in 1.7.0.

Hopefully getting this basic implementation in place in the next release will address the need for most of you.

UPDATE to my earlier solution about doing AJAX submit for forms.  That nice elegant one-line PHP solution for creating the form unfortunately does not work any longer in 1.06.04.  Sounds like there'll be an official solution in 1.06.05, but if anyone out there is looking for AJAX submit now, I did find a work around.  Unfortunately, it's lost some elegance.

1.06.04 introduced a new way of creating the entry from the front end.  Unfortunately, this gets bypassed if is_admin() is true (see FrmEntriesController::process_entry).  If using the standard WP admin-ajax.php AJAX API, then is_admin() will ALWAYS be true, and there seems no way to create the form as if the user had submitted by boring old POST.

The workaround I found (again, I ain't sayin' it's pretty), was to basically copy the entire FrmEntriesController::process_entry method, sans is_admin(), into a my_process_entry() function and call that from the AJAX function.  So, my PHP (for version 1.06.04 of Formidable) now looks like this:

PHP

add_action('wp_ajax_frm_submit_form','my_frm_submit_form');
add_action('wp_ajax_nopriv_frm_submit_form','my_frm_submit_form');
function my_frm_submit_form(){
if (method_exists('FrmEntriesController','process_entry')){
my_process_entry();
// Now the entry has been created, we get back to our elegant one line solution
// for displaying the results
}
echo FrmEntriesController::show_form($_POST['form_id']);
die();
}

function my_process_entry(){
// Copied verbatim from FrmEntriesController::process_method
global $frm_entry, $frm_form, $frm_created_entry, $frm_form_params;

$form = $frm_form->getOne($_POST['form_id']);
if(!$form)
return;

if(!$frm_form_params)
$frm_form_params = array();
$params = FrmEntriesController::get_params($form);
$frm_form_params[$form->id] = $params;

if(!$frm_created_entry)
$frm_created_entry = array();

if(isset($frm_created_entry[$_POST['form_id']]))
return;

$errors = $frm_entry->validate($_POST);
$frm_created_entry[$_POST['form_id']] = array('errors' => $errors);

if( empty($errors) ){
$_POST['frm_skip_cookie'] = 1;
if($params['action'] == 'create'){
if (apply_filters('frm_continue_to_create', true, $_POST['form_id']))
$frm_created_entry[$_POST['form_id']]['entry_id'] = $frm_entry->create( $_POST );
}

do_action('frm_process_entry', $params, $errors, $form);
unset($_POST['frm_skip_cookie']);
}
}

And now the AJAX submit works again.

P.S. - Steve & Steph, how come I can't post nicely formatted code into the Knowledge Base?

Is this available yet?

This isn't available yet. For now, you will need to follow trevor's code to get ajax submit working.

Hi Steve, is there an approximate ETA for the release? I have no idea how to implement Trevors code to get the ajax submit working within a wordpress tab.

We still don't have an ETA on this feature other than to say that we are hoping to implement a basic implementation of the ajax submit in the next release. I am not sure when a beta version will be available for download.

Any update on this?

This is planned for the next release. No ETA on a beta yet.

Fantastic. I can't wait for this! +100 for this feature.

The websites I build have responsive web design interfaces hooked up with function and database calls served using Ajax.

We are now web.2012 - your pro forms submitted using Ajax would complete the picture :)

So ... finally how the solution is Trevor Mills? Please, can you tell me what files should I modify?
and ...
Where exactly should I change the code?

Thanks!

You would probably want to add the Code Trevor Provided in a new plugin or in your theme's functions.php file. Although, I highly recommend doing so on a test environment since his code is untested and unverified. If you aren't very comfortable with PHP, you may want to hire a developer.

Hi,

I use a registration form done with Formidable and the registration addon. Do I need to include the javascript? If yes, where?
Also, in the JS, there is this line: myAjaxSubmit = function(id){
do I need to replace "id" with the form ID?

Another month has passed - any news on this?

.....desperate for this - I have to hand code a solution for this today :(

Another vote for Ajax submit.... Make it so

I agree, ajax submit would be awesome.

Any news on this - still waiting.... ?!

We still haven't started on this feature. There are other features and enhancements that are higher priority than this, and we have no ETA on when it will be available. If you need this functionality now, you will need to hire a developer to add this functionality to your site.

This would be great to be able to use the first part of a form to match entries from another form, then a user could select the entry that was most appropriate to them and the continue on to complete the form.

@mytoura, that's not really related to ajax submit. This one looks closer to what you are after:
http://formidablepro.com/help-desk/load-entry-data/

So is there any way of dropping my fomidable form in a modal without AJAX submit?

@eric, Yes this can still be done. See: http://formidablepro.com/help-desk/form-pop-up-window-function/ and http://formidablepro.com/help-desk/lightbox-feature/

Hope this feature is implemented at some point. I require this feature for some parts of my website. I've held it off until some official implementation of ajax is put into formidable.

Ajax submit is included in the version of Formidable Pro currently in Beta. You are welcome to download the beta or wait until it is officially released.

The only limitation of the current version of Ajax submit is with file upload fields. It will work with all field types except file upload fields.

Thats great news!

Can you give us an estimation of when it will be released offically?

Thanks in advance.

Soon. We don't know exactly when as that depends on how many users start using the Beta and what Bugs get uncovered.