0

I'm trying to detect when a form is submitted so I have written this code:

jQuery('#formid').submit(function(event){
        console.log('submit handler');
})

But nothing happens and the form is submitted normally. The form is rendered as usual and the submit button is generated with this code:

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Enviar'),
    '#attributes' => array('class' => array('btn','pull-right')),
    '#ajax' => array(
        'callback' => 'contact_form_ajax_submit',
        'wrapper' => $result_wrapper,
        'progress' => array(
          'type' => 'none',
          'message' => NULL,
        ),
    ),
  );

I don't know why my jquery script doesn't intercept the submit. I've checked the form id (obviously) so I ask for help because I have no idea about what could be the problem.

Thanks

Link: http://seminolaproducciones.com/contacto

6
  • I believe you need to return false; after the console.log to stop the form from submitting.
    – Beebee
    Feb 12 '13 at 9:49
  • Tried this: jQuery('#contact-result-wrapper').submit(function(event){ console.log('submit handler'); return false; }) with the same result
    – xger86x
    Feb 12 '13 at 9:52
  • Check this API page especially the 2nd example.
    – Beebee
    Feb 12 '13 at 9:55
  • Only reason why returning false won't work is the function is never run in the first place.
    – Beebee
    Feb 12 '13 at 9:55
  • 1
    It's probably because you're using #ajax on the submit button as well so your callback is overridden. You may be able to add the js submit handler as part of a Drupal.behaviors function instead. Note, you can validate the form server side with ajax if you want. Feb 12 '13 at 10:15
2

For normal forms you need bind submit event handler to the form, something like below as Baysaa said,

jQuery('#formid').submit(function() {
  console.log('submit handler');
  return false;
});

However For Drupal AJAX forms this wont work, Because Drupal AJAX forms are submitted by Drupal in a different way when the submit button is clicked, So you need to just bind the click event to the submit button to detect the form submission, Something like below,

jQuery('#submit-form').submit(function() {
  console.log('Form is being submitted');
});

Here the restriction is you cant prevent form being submitted, even if you put return false in you custom click handler.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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