e.preventdefault breaking non active buttons

Question

I have a form with multiple save buttons per customer request along with a few other buttons. When they click a save button, a confirm box opens. If they select cancel the intent is to prevent the form from submitting. However, when a user tries to select a save button other than the save button they just pressed nothing happens.

$("form").submit(function (e) {
    var $btn = $(document.activeElement);
    if ($btn.attr("value") == "Save") {
        var c = confirm("Did you review the suicide related issues, signs and factors for currency?");
        if (!c) {
            $btn.css('filter', 'none');
            e.preventDefault();
        } else {
            return true;
        }
    }
});

That `return true` looks suspicious. The JQuery docs say to either do `e.preventDefault` or `return false;` https://api.jquery.com/submit/ — Ian Mundy, Oct 13 '16 at 23:24
@IanMundy I just made an update to correctly reflect the correct code I'm using. I tried replacing e.preventDefault() with return false, but I experience the same issue. — CBC_NS, Oct 13 '16 at 23:25
Can you make a complete stack snippet that demonstrates the problem? — Barmar, Oct 14 '16 at 00:11
`e.preventDefault()` is the correct thing. You shouldn't return anything from a handler, specially because the meaning is different in jQuery and in regular event handlers — Ruan Mendes, Oct 14 '16 at 00:18
You have to show the HTML, we can't guess what your other buttons look like — Ruan Mendes, Oct 14 '16 at 00:19

score 0 · Answer 1 · edited May 23 '17 at 12:33

0

I have some issues with the code:

1- using activeElement seems dicey, I would switch to target id.

To Clarify this point: from this answer: Just a note to keep things current. As of right now, Safari sets activeElement to the document body when clicking on a submit button. I ran into this issue on Safari 9.1
2- After checking the button is a save, prompt for confirm and then call .submit(handler) etc

I couldn't reproduce your behavior on pc, on mac there are bugs so it won't even run

Edit:

Here's what I propose instead:

$(":button").click(function(e) {
  if (e.target.value == "Save") {
    var c = confirm("Did you review the suicide related issues, signs and factors for currency?");
    if (!c) {
      console.log('form not submited');
    } else {
      $("form").submit(function() {    
        console.log('Form Submited');
      });
    }
  }
});

And the HTML:

  <form>
    <button value ="Save" type="submit" name="button_1">Button #1</button>
    <button value ="Save" type="submit" name="button_2">Button #2</button>
    <button value ="Save" type="submit" name="button_3">Button #3</button>
    <button value ="Save" type="submit" name="button_4">Button #4</button>
    <button value ="Save" type="submit" name="button_5">Button #5</button>
    <button value ="Save" type="submit" name="button_6">Button #6</button>
  </form>

In Codepen

edited May 23 '17 at 12:33

Community

1
1

answered Oct 14 '16 at 00:14

Keno

3,694
2
21
40

1

`activeElement` is not really dicey, please explain – Ruan Mendes Oct 14 '16 at 00:16
Note: On Mac, elements that aren't text input elements tend not to get focus assigned to them. + his attribute is part of the in-development HTML 5 specification. – Keno Oct 14 '16 at 00:23
My take is that activeElement gives you the dom element with focus that is reachable through keyboard input, plus there is bubbling and nesting of elements. Does it work, sure, and since this is programming there are multiple ways of doing things, beyond the bugs/vendor support I feel strongly about, I prefer a more direct path: something like onClick, but yeah, use whatever you like. – Keno Oct 14 '16 at 00:44
Yeah, sorry. I did miss the explanation you added after my complaint, took the downvote back – Ruan Mendes Oct 14 '16 at 03:15
@Keno unfortunately, when I tried your method as shown above, clicking any button did not trigger the event at all. – CBC_NS Oct 14 '16 at 14:38
@CBC_NS : The linked pen works for me on both mac and PC, I've edited the response to show the Html, so you might need to change that as well. – Keno Oct 14 '16 at 20:29

e.preventdefault breaking non active buttons

1 Answers1