<p>The problem is likely that Craft has its attached its own <code>submit</code> handler to the form already, and jQuery event listeners are always triggered in the order  they were attached.</p>
<p>You could verify that by doing a <code>$('form').off('submit')</code> (which, in theory, should de-register any existing event listeners for the <code>'submit'</code> event) - i.e.</p>
<pre class="lang-js prettyprint-override"><code>$('form').off('submit');
$('form').submit(function(e) {
    ...
});
</code></pre>
<p>I don't think de-registering Craft's own event listeners is the best idea, though.</p>
<p>You might have more luck hi-jacking the form's submit button instead of the actual form, i.e. something like this (untested):</p>
<pre class="lang-js prettyprint-override"><code>$('form').on('button[type=&quot;submit&quot;]', 'click', function (e) {
   if (confirm('Are you sure you want to save?')) {
       return true;
   }
   e.preventDefault();
   return false;
});
</code></pre>
<p>If that works, you should be almost there – although you'd probably have to hi-jack the form save shortcut as well (i.e. Cmd+S and whatever the Windows equivalent is).</p>

CC BY-SA 4.0
2022-03-28T08:13:18.067Z
2022-03-28T08:13:18.067Z
Mats Mikkel Rummelhoff
<p>I've got a plugin that's got element types. I've got a <code>Transaction</code> element that I need the user to confirm before saving.</p>
<p>I've tried to use the jQuery that comes with craft:</p>
<pre><code>$('form').submit(function(e) {
    var txt;
    if (confirm(&quot;Are you sure you want to save?&quot;)) {
      txt = &quot;You pressed OK!&quot;;
    } else {
      txt = &quot;You pressed Cancel!&quot;;
      return false;
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
    }

    console.log(txt);
  })

</code></pre>
<p>but the element still saves on the edit page.</p>
<p>How can I prevent the element from saving if the user clicks cancel.</p>

<plugin-development><elementtype>
Custom plugin - show popup before element save
# Custom plugin - show popup before element save

(Asked by: username_0 on 2022-03-25)

I've got a plugin that's got element types. I've got a Transaction element that I need the user to confirm before saving.
I've tried to use the jQuery that comes with craft:
$('form').submit(function(e) {
    var txt;
    if (confirm("Are you sure you want to save?")) {
      txt = "You pressed OK!";
    } else {
      txt = "You pressed Cancel!";
      return false;
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
    }

    console.log(txt);
  })


but the element still saves on the edit page.
How can I prevent the element from saving if the user clicks cancel.

**Tags:** plugin-development, elementtype


---

## 1 answers

### Answer by username_1 on 2022-03-28. Score: 1

The problem is likely that Craft has its attached its own submit handler to the form already, and jQuery event listeners are always triggered in the order  they were attached.
You could verify that by doing a $('form').off('submit') (which, in theory, should de-register any existing event listeners for the 'submit' event) - i.e.
$('form').off('submit');
$('form').submit(function(e) {
    ...
});

I don't think de-registering Craft's own event listeners is the best idea, though.
You might have more luck hi-jacking the form's submit button instead of the actual form, i.e. something like this (untested):
$('form').on('button[type="submit"]', 'click', function (e) {
   if (confirm('Are you sure you want to save?')) {
       return true;
   }
   e.preventDefault();
   return false;
});

If that works, you should be almost there – although you'd probably have to hi-jack the form save shortcut as well (i.e. Cmd+S and whatever the Windows equivalent is).


---

