1

Using Drupal 7 form API, How can I prompt javascript confirm box before submitting an AJAX form? I have tried different possible ways to do this but no success. Here is the code:

function create_list_form($form, &$form_state) {

  $form['list_name'] = array(
    '#type' => 'textfield',
    '#required' => TRUE,
    '#title' => 'List Name'
    '#attributes' => array()
  );

  $form['list_desc'] = array(
    '#type' => 'textfield',
    '#required' => TRUE,
    '#title' => 'List Desc'
    '#attributes' => array()
  );

    $form['actions']['submit'] = array(
        '#type' => 'submit',
        '#attributes' => array('class' => array('use-ajax-submit')),            
        '#value' => 'Create List'
      );


  return $form;
}

Here is the Javascript code:

Drupal.behaviors.module = {
  attach: function() {

       jQuery('#edit-submit').click(function(){
          if(!confirm('Are you sure?'))
              return false;
      });

  }
}
2
  • You should show your javascript code since that is most pertinent here.
    – Mike Brant
    Sep 18, 2012 at 14:33
  • I have tried various javascript techniques to get this done, but no success yet. I have edited the question and added one of those javascript codes. IT displays confirmation box, but submits the form even if I press No button.
    – Adnan
    Sep 19, 2012 at 8:23

2 Answers 2

7

I have found the solution. We can do it by overriding beforeSerialize() function:

 Drupal.behaviors.module = {
  attach: function() {  

     Drupal.ajax['edit-submit'].beforeSerialize = function () {  

          if(confirm('Are you sure?'))
              return true;
          else
              return false;

      }
   }
 }
2
  • Very important thing is to know, that this part of code should't be inside $(document).ready event, because, then it not run. For me, it works not in listener of this event. According this tutorial: drupal.org/node/304258#drupal-behaviors, when is running this part of code Jun 6, 2013 at 14:45
  • I have a very complicated form using field_collections to add any number of creators with different roles. UX people said it would be good to add delete confirmation if a user tried to delete any one of the creators. I could not do it with any kind of event listener because even with e.preventDefault() or e.stopPropogation() the ajax call still went through. This answer however was the key, and the code above, changed for our situation, worked perfectly. Thank you. Dec 11, 2018 at 22:25
0

Did you try to add an eventlistener on your button?

function show_confirmation() {
    if (confirm("Do you want to submit?")){
        // here you can do something before it gets submitted
    } else {
        // return false prevents the form from submitting
        return false;
    }
}
var button = document.getElementById('button_name');
button.addEventListener('click', show_confirmation);

Edit: You can use this one if you want to make your function re-usable:

function your_callback_func() {
    // This could be any code for example your AJAX code etc
}

function show_confirmation(your_callback_func) {
    if (confirm("Do you want to submit?")){
        your_callback_func()
    } else {
        // return false prevents the form from submitting
        return false;
    }
}
var button = $('#button_name');
button.click(function() {
    show_confirmation(your_callback_func);
});
4
  • I tried this code. It prompts the confirmation box, but doesn't wait for user response and keeps submit the AJAX form.
    – Adnan
    Sep 19, 2012 at 9:05
  • You'll have to make a function for your AJAX submit code and then call that function inside the if(confirm) statement. BTW why not use a javascript library e.g JQuery, Prototype, MooTools etc.? They're easy to use and they're fast! I've been struggling with JS for a long long time because I never wanted to use any lib. But now I can't do without JQuery. Anyway tell me if your script works now. And I'll edit my answer to make the script more efficient.
    – gblblgl
    Sep 19, 2012 at 10:37
  • I am using JQuery. Have a look at my question again, I have edited it and have added javascript part. In Drupal forms, we don't write custom AJAX for submitting a form, instead we just use a css class 'use-ajax-submit' on Submit button to convert a regular form to AJAX one.
    – Adnan
    Sep 19, 2012 at 10:59
  • Oops.. My bad. Mixed it with another question. I hadn't slept for more than 24 hours.
    – gblblgl
    Sep 19, 2012 at 11:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.