Another Update

I'm trying to implement the solution found here: Intercept click event on a button, ask for confirmation, then proceed, but the remove button still submits normally. I know my JS is targeting the correct element, because I can change other attributes on it like the background color.

Here's my form:

function form_experiments_01() {
  $form['#attached']['js'] = array(
    drupal_get_path('module', 'form_experiments') . '/js/form_experiments.js',

  $form['managed_files'] = array(
    '#type' => 'fieldset',
    '#title' => t('Managed Files'),

  $num_docs = 3;
  for ($i = 1; $i <= $num_docs; $i++) {
    $form['managed_files'][$i] = array(
      '#type' => 'managed_file',
      '#title' => 'Managed File ' . $i,

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Submit',

  return $form;

Here's my javascript:

(function ($) {
  Drupal.behaviors.managedFileAutoUpload = {
    attach: function(context, settings) {
      $('.form-item input.form-submit[value=Upload]', context).hide();
      $('.form-item input.form-file', context).change(function() {
        $parent = $(this).closest('.form-item');

        //setTimeout to allow for validation
        //would prefer an event, but there isn't one
        setTimeout(function() {
          if(!$('.error', $parent).length) {
            $('input.form-submit[value=Upload]', $parent).mousedown();
        }, 100);

  Drupal.behaviors.managedFileConfirmRemove = {
    attach: function(context, settings) {
      var myButton = $('.form-item input.form-submit[value=Remove]', context);

      if (myButton.length > 0) {
        var myClick = null;

        //get a list of jQuery handlers bound to the click event
        var jQueryHandlers = myButton.data('events').click;


        //grab the first jquery function bound to this event
        $.each(jQueryHandlers,function(i,f) {
          myClick = f.handler;
          return false;

        //unbind the original

        //bind the modified one
          if(window.confirm("Are You Sure?")){
          } else {
            return false;


After some more research I found this question. This is what I was trying to ask but didn't know how to word.

Intercept click event on a button, ask for confirmation, then proceed

I'll implement this solution and post a resolution once I've got it working.


I would like to add a confirmation tooltip when the "remove" button is clicked on my managed_file field.

I would like to do something similar to this:

Bootstrap Confirmation Example

What is the best way to do that?

Possible Solution?

So far, I'm thinking I could probably use javascript to hide the remove button and instead display my own button. Then when my button is clicked, I can trigger a popup that contains a second custom button to cancel and the remove button that I originally hid.

I'm worried that this solution is a bit messy. Is there a more elegant way to do this? Can I get a similar behavior without hiding the original remove button?

Similar Questions

I'm not sure if these apply to my use-case since I'm working with a managed_file field. So far, I've been unable to implement similar solutions without the default behavior of the remove button interfering.


  • 1
    There is no specific 'Drupal' way to do this, Your best best is to use javascript to prevent the submission when clicked, show your popup and on confirm trigger the original remove button with the JS.
    – tobynew
    Commented Dec 7, 2016 at 16:22

1 Answer 1


Use this code to delay submit and display popup before submitting.

$("form").submit( function () {
   //display tooltip something
   return true;

Something like this:

$('.form-item input.form-submit[value=Remove]').submit {
  if (window.confirm("Are You Sure?")) {
  } else {
    return false;

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.