Preventing a form from submitting with jQuery not working

Question

This is my simple form:

<form accept-charset="utf-8" class="form-vertical" id="template" autocomplete="off" name="template" method="POST" action="http://test.dev/templates">
    ...various inputs and HTML here...
    <input class="btn btn-primary" type="submit" value="Update">
</form>

This is my JS which doesn't prevent the form from submitting:

<script type="text/javascript">
    (function ($) {
        'use strict';

        $("form#template").on('submit.template', function (e) {
            e.preventDefault();
            console.debug(e.relatedTarget);
            return false;
        });
    }(jQuery));
</script>

From past experience, this should prevent the form from submitting when Update is clicked. Feel like I am missing something painfully obvious. What could be going on here?

jQuery 2.1.1

How do you debug it? Is the submit handler fired? Maybe you need to just use document ready handler as a wrapper, e.g: `jQuery(function($){...});` FYI, your `return` statement is useless here — A. Wolff, Feb 21 '15 at 17:37
Most likely that script is not executed. Different reasons, but since this is an inline script it might be in conflict with a `Content-Security-Policy` header. That should be shown in the browsers console. — arkascha, Feb 21 '15 at 17:37
@j08691 At the end of the code block, after performing several checks, I had planned to use JS to submit the form. The namespace allows me to turn off the submit check the 2nd time around to prevent looping: `$("form#template").off('submit.template').submit();` — eComEvo, Feb 21 '15 at 17:42
@arkascha Given it never shows as a fired event in Chrome, it appears it isn't being executed. No idea why though. — eComEvo, Feb 21 '15 at 17:47
Any console errors? Have you tried doing this in a doc ready block to make sure the dom content is loaded before the event is bound? — Ezra Morse, Feb 21 '15 at 17:47
@eComEvo You ***have*** to bind event once element added to the DOM, not before. So set event binding once element is available in the DOM, using e.g document ready handler — A. Wolff, Feb 21 '15 at 17:48
@EzraMorse `(function ($) {...}(jQuery));` is the equivalent of that. Also, the JS loads at the end of all other elements on the page. — eComEvo, Feb 21 '15 at 17:48
I meant to make sure the _binding_ is executed, so the script. Not the handler you define inside the script. — arkascha, Feb 21 '15 at 17:49
@A.Wolff They are actually equivalent: http://stackoverflow.com/questions/3528509/document-readyfunction-vs-function — eComEvo, Feb 21 '15 at 17:50
@eComEvo Read your link again and compare it to your code, this is completly different, `$(handler)` != than self invoked function (passing it or not jQuery) — A. Wolff, Feb 21 '15 at 17:51
Your example works here http://jsfiddle.net/j08691/8k9y1kLs/. — j08691, Feb 21 '15 at 17:51
Well just throw it in a .ready block and see what happens. Itll take you 15 secs. — Ezra Morse, Feb 21 '15 at 17:52
@eComEvo SO is the FORM added dynamically to the DOM? Why don't you post relevant link or online sample where your issue can be checked??? — A. Wolff, Feb 21 '15 at 17:54
@A.Wolff The fiddle posted by j08691 is the same as what I'm working with. It's possible some library I'm including somewhere in the general site is mucking the code up because this has always worked before without issue. And no, the form is not dynamically added. It is a static Blade created form. Can't post the entire source here, regrettably. — eComEvo, Feb 21 '15 at 18:00
@eComEvo Could you try: `jQuery(document).on('submit.template', 'form#template', function(e){...});`? As a side note, IDs must be unique on document context, just saying it in case of... — A. Wolff, Feb 21 '15 at 18:03
Its very difficult to figure out the issue without the original source, since the provided code has no problem. If I were you, I would bind click events (or even hide() them to start) to the submit button to test if the events are even being bound. That said, I no longer use forms or submit events anyway so Im normally focused on the GUI elements entirely. — Ezra Morse, Feb 21 '15 at 18:06
@A.Wolff Nice idea, but unfortunately it didn't resolve it. :( Just tried this little bit of code right before the `.on()` statement to see if the form is even in the DOM `console.log('len: '+$('form#template').length);` and it is in fact not available. Turns out that is because the `id` attr is missing. I can see it when I `view page source`, BUT I can't see the `id` attribute on the form when I do `inspect element`. The discrepancy appears to be the problem. — eComEvo, Feb 21 '15 at 18:13
@eComEvo So the template engine remove the ID, quite weird indeed... :( You could still bind event without specifying any ID, this would work — A. Wolff, Feb 21 '15 at 18:17
@A.Wolff It is very strange and not something I could reproduce with a jsFiddle otherwise I'd post it. For instance, I added the following immediately after the closing `` tag and I get an empty result: `` It's as if the form isn't accessible to JS despite being clearly visible on the screen. I'm at a loss. — eComEvo, Feb 21 '15 at 18:28
Does it remove class and data- attributes as well? You could bind using those alternatively (or none at all if its the only form on the page) — Ezra Morse, Feb 21 '15 at 18:28
@EzraMorse The template engine is actually not removing anything. This is happening purely in Chrome. The class tag remains but data tags are also stripped. — eComEvo, Feb 21 '15 at 18:31
Is the FORM wrapped inside an IFRAME? I added `laravel` & `blade` tags even i'm not sure this is the relevant ones. An 'expert' regarding this template could then have a look at it — A. Wolff, Feb 21 '15 at 18:34
@A.Wolff Yes, the form is in an iframe. I'm viewing the iframe contents when I'm looking at this and the JS is loaded within the iframe for this. Same domain. — eComEvo, Feb 21 '15 at 18:38
So to access it, try: `$(window).on('load', function(){console.log($('iframe").contents().find("form.form-vertical").length);});` — A. Wolff, Feb 21 '15 at 18:40
@A.Wolff Sames result. Doesn't show as existing. I also tried getting specific since it is loaded by jQuery colorbox and did: `console.log('len: ' + $('iframe.cboxIframe').contents().find("form.form-vertical").length);` No dice though. — eComEvo, Feb 21 '15 at 18:43
You have to try to access it once the IFRAME is loaded, not before. If still not working, i'm out of idea :( — A. Wolff, Feb 21 '15 at 18:45
@A.Wolff Actually, I just tried `$('iframe.cboxIframe').contents().find("form.form-vertical").length` from the Chrome dev console and it shows that it exists. If I do that same code from the JS code block at the bottom of the page, it shows it doesn't exist, which doesn't make sense since the iframe is loaded when the `.ready()` call is made (and this is in that). — eComEvo, Feb 21 '15 at 18:45
@A.Wolff In any event, thanks to you and the rest for helping me get to this point. This is a very bizarre bug I'm going to have to keep banging my head against. BTW, thanks for pointing out the discrepancy in my understanding with what was posted in: http://stackoverflow.com/questions/3528509/document-readyfunction-vs-function — eComEvo, Feb 21 '15 at 18:53

score 1 · Answer 1 · answered Feb 21 '15 at 19:42

1

Ran through all the form names using .each() and discovered the form was called templates (plural) despite the fact that many reloads ago I changed it to template. Something in the template system was in fact caching that part of the code, and clearing the template cache resolved the issue.

All JS now works as it should without modification.

answered Feb 21 '15 at 19:42

eComEvo

11,669
26
89
145

This topic should probably be closed or deleted given it didn't end up being an actual JS or jQuery issue in the end. – eComEvo Feb 21 '15 at 19:43

Preventing a form from submitting with jQuery not working

1 Answers1