Ajax Submit

I don't know, as I've never used AJAX Submit to begin with. Perhaps you should ask for alternatives from that module's queue? This doesn't really seem webform-specific.

I'm trying to work out the same .. just posted an issue at http://drupal.org/node/1211712.

Let's merge with #1211712: Adding Ajax to Webforms in Drupal 7 - Ajax Submit. No point in having two discussions on the same thing. I've marked that other issue as duplicate.

Okay, I've got my ajax callback function working - whatever I return is added my form.

HOWEVER .. the replacement occurs whether the form validates or not.

Do the standard callbacks (via ['#submit'][] and ['#validate'][]) need to be looked after independently if ajax is used?

I think it is webform specific, as there's no module for ajax submit. It's part of core and the standard FAPI in D7.

I've discovered that

if (!form_get_errors()) {  ... }

can be used within an ajax callback function to provide an indication of whether validation was successful. Because only part of the markup is being updated, the standard method for indicating validation errors - drupal_set_message() - can't be employed. Also, the highlighting of problem elements (via CSS class additions) isn't possible unless the form is refreshed.

Hi again

I've found that it's possible to alter a webform to use ajax on submit using HOOK_form_alter().

For example:

$form['actions']['submit'] = array(
        '#type' => 'submit',
        '#ajax' => array(
            'callback' => 'THEMENAME_ajax_callback',
            'wrapper' => str_replace('_','-',$form['#form_id']),
            'effect' => 'fade',
        ),
        '#value' => t('Submit'),
);

This will call the function THEMENAME_ajax_callback and will pass the ($form, $form_state) arrays to that function. The 'wrapper' attribute defines which blocklevel element will be replaced.

The callback function can return HTML, or a form element.

My problem is, if an incorrect value is specified the user needs to be alerted. To deal with this case I test form_get_errors() which seems to partly achieve what I'm hoping for. However the form itself isn't updated, so the classes that are used to specify elements that need attention aren't applied. The default error handing via drupal_set_messages() isn't carried out either.

I found that if I return the full form array directly from the callback function, the required messages are output in the required location, but after a second submission the newly added #ajax info added to the form via HOOK_form_alter isn't held persistently.

Looking into the code, it seems that when ajax_form_callback() is run, the form is rebuilt .. perhaps the modifications made via HOOK_form_alter() aren't being reapplied? If this is the case, I'm unsure where else I could apply the #ajax info into the form to deal with this.

Any advice would be appreciated.

Thank you for posting the above HOOK_form_alter code - works great for me. In my ajax callback function, I am using:

if(form_get_errors()){
  return $form;
}else{
  return 'Thank you!';
}

Even when the form is submitted multiple times (due to validation errors), the '#ajax' form alter stays intact. My setup:

• Drupal 7.4
• Webform 7.x-3.11

Does that help?

Thanks for the reply - I'll try out what you've suggested and see if it works for me as well.

Cheers

Luke

Hm. So how would the actual implementation look?

Would you need to create a custom module?

The code can sit in template.php in your theme if you're using D7. Previous versions of Drupal wouldn't allow HOOK_form_alter to exist within a theme, so a separate module would have been required.

I'll have a think about this, and work out if it could be adapted to work as a module. If I can think of a good solution, I'll post back the results here.

Hello,

I've tried the above code, and the form submission isn't saved.

the ajax works, well, form validation works, and I get the thank you at the end, but nothing is saved at the end of the proccess.

works without the ajax.

here's my code

[code]

function enjoon_form_alter(&$form, &$form_state, $form_id) {
if($form_id == 'webform_client_form_32'){
$form['actions']['submit'] = array(
'#type' => 'submit',
'#ajax' => array(
'callback' => 'enjoon_ajax_callback',
'wrapper' => str_replace('_','-',$form['#form_id']),
'effect' => 'fade',
),
'#value' => t('Submit'),
);
}
}

function enjoon_ajax_callback($form, $form_state) {

if(form_get_errors()){
return $form;
}
else{
return 'Thank you!';
}
}
[/code]

This approach preserves the confirmation message settings and may save someone else a lot of time:

function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  switch($form_id) {
    case 'webform_client_form_ID':
      $form['actions']['submit']['#ajax' ] = array(
        'callback' => 'MYMODULE_ajax_callback',
        'wrapper' => str_replace('_','-',$form['#form_id']),
      );
      
      $form['#submit'][] = 'MYMODULE_ajax_form_submit';
      
    break;
  }
}

function MYMODULE_ajax_form_submit(&$form, &$form_state) {
  //You'll get an error about undefined index without this
  $form_state['rebuild'] = FALSE;
}

function MYMODULE_ajax_callback(&$form, &$form_state) {
  return $form;
}

Hi sumosystems, this probably sounds like a newbie question, can u provide the complete code please? especially with the javascript code, since we're talking about submitting webform using ajax here.
I also encounter this kind of issue, and had been pulling my hair since few days ago :P

Just FYI, my first thought of this is by using drupal_execute.
And I found this tutorial: http://thedrupalblog.com/programmatically-submit-webform-using-drupal-ex...
which I think can be done in Drupal 7, but apparently is not as easy as I thought.

I hope I'm talking the same problem here.

Thanks

UPDATED:
Sorry for my stupidness, it doesn't required any js file actually http://drupal.org/node/752056 :P
Anyway, I've just tried what sumosystem suggest there, but I got this when I checked in Firebug:
"NetworkError: 500 Internal Server Error - http://www.somedomain.com/system/ajax"

Anyone know why this happen?

Thanks

Hi,

I was wondering if anyone has had success in resetting the form?

After a successful submission, the form is not cleared. The user happens to find him/herself in front of an updatable form submission (by submission ID) : If you click submit again, you will get a "Submission Updated" message. You can even change the field values (which is actually kinda handy).

My question is, how could we reset the form and "prepare it" for a NEW submission after it has been successfully transmitted?

Hope that was clear.

Cheers

ADDITIONAL INFO :

For anyone looking, if you want ajax.js to handle the confirmation message you must :

1. Set a confirmation message under the form settings (node/%/webform/configure)
2. Choose "No redirect (reload current page)"

Hope this helps someone.

Let's take rasumo's example (#15)

The following is great if you want to reset the form. After the form has been successfully transmitted, the process serves up a fresh new form ready for transmission. HOWEVER, the fields are still populated. At this point, one could simple use jQuery('#form-id').clearForm();

function MYMODULE_ajax_form_submit(&$form, &$form_state) {
  $form_state['rebuild'] = FALSE;
}

On the contrary, by using the following you can allow the user to update the information that was just posted. They will get the "Submission Updated" status message each time they re-click the submit button.

function MYMODULE_ajax_form_submit(&$form, &$form_state) {
  $form_state['rebuild'] = TRUE;
}

Here's a great link for additional information http://envisioninteractive.com/drupal/add-ajax-to-a-webform-in-drupal-7/

Cheers

Closing after lack of activity.

I've created a module webform_ajax_submit with an option per each webform node to be submitted via ajax.
The idea was taken from #15 (thanks rasumo).
http://drupal.org/sandbox/alex.designworks/1446550

@rasumo @alex.designworks

module at #20 seems to work greatly.

#20 is the solution for me.

May thanks.

#20 doesn't seem to work well when the form is in a block.
it works the first time it is submitted, but if it does not validate, the errors are shown as they should be but the form is no longer ajaxified.

@2pha

It doesn't happen to me. Messages appear inside the block.

@gianfrasoft
Even if it doesn't validate? The form can be used multiple times?

I just tried it on a new install of drupal with only webform module.

This seems to only happen when the webform is in a block.
When the page is loaded, the form in the block is how it should be and has the 'ajax-processed' classes.
If you try to submit the form for the first time and the form is invalid, ajax is used and errors are shown above the form, as expected.
But,
the next time you try to submit, after and invalid try, the form no longer uses ajax and redirects to the page.

Am I the only one with this problem?

the webform versions I have tried with are 7.x-3.15 and 7.x-3.16
problem exists in both...well, for me anyway.

My installation still has no problem.

I'm using webform 7.x - 3.15.

I have just tried it at home (as opposed to work) and it works fine. Hmmm, will have to wait till Monday to test the work site again.

I have just found the problem.
It is because on the page with the webform block that I am trying to ajaxify, I also have the search block which is redered before the webform block.
When the page is first loaded, the ajax webform submit button id is 'edit-submit--2' (because the search block submit has the id of 'edit-submit'), but after the webform is submitted and returned with ajax, the webform submit button id is 'edit-submit'.

Removing the search block, makes the webform submit button have the id of 'edit-submit' on the first load aswell as when it is returned by ajax.....and all works as it should.

Now to find a work around.

added this to the form_alter in the ajax submit module to give the submit button a unique name.
This should probably be changed the webform module at some point.

$form['actions']['submit']['#id'] = 'edit-submit-'.$form['#form_id'];

Interesting, @2pha. I'll do the same.

Hello,
I just rewrote Webform AJAX for Drupal 7, maybe you could have a look to my sandbox module?
http://drupal.org/sandbox/davidstosik/1468746
It's pending approval to be commited on webform_ajax repository.
Previous and next buttons, and also submit buttons are AJAXified, and don't need a page reload.
It also works in a block and handles submit confirmation and validation gracefully.
(You can choose for each webform to have an AJAX behaviour or not).
(As it is very small code, I'm even wondering if that could become part of Webform module...)
Throws a PHP Notice with Webform-3.16, fixed on 3.x-dev.

Regards,

David

Thanks 2pha on #29.

Indeed. My search block was also confusing the alter code.

Thumbs up for the good tip! (y)

#30 is absolute right. Thank you 2pha!
But except from <input id="edit-submit-[form_id]">
you must also alter the input parent <div id="edit-actions-[form_id]">!

So you finally must add these 2 lines in your hook_form_alter() function.

$form['actions']['submit']['#id'] = 'edit-submit-' . $form_id;
$form['actions']['#id'] = 'edit-actions-' . $form_id;

or using node id

// get the nid so we can use it in the wrappers. nid is unique too for each webform.
$nid = $form['#node']->nid;
$form['actions']['submit']['#id'] = 'edit-submit-' . $nid;
$form['actions']['#id'] = 'edit-actions-' . $nid;

Example:

// also mytheme_form_alter() can be used if you use it on template.php
function mymodule_form_alter(&$form, &$form_state, $form_id) {  
    $form['actions']['submit']['#id'] = 'edit-submit-' . $form_id;
    $form['actions']['#id'] = 'edit-actions-' . $form_id;
}

Hello,

Sorry if I sound rude, but I don't get why this issue is still active, although a release of Webform AJAX for Drupal 7 exists, and provides more features than what this sandbox module provides. You even are working on the same issues I had and already fixed before (see the issue queue).

Wouldn't "join forces" the right thing to do?

Regards,

David

@David Stosik
I totally agree that "joining forces" is the right way to go.
Could you please release a stable version of your module, because only devs are available now and people are expecting to see stable?

@rasumo @alex.designworks

#20 is the solution for me, works!

In my case I was displaying a webform in a popup with Simple dialog module and when the user submit the webform still is in the popup and show the confirmation message, I tried with webform ajax module but don't show the confirmation message.

Thnks!