0

I'm trying to create a simple submit form in WYSIWYG Web Designer 10 but I have a BIG problem with Enter key. There are several edit boxes on the form and I'd like to have the following functionality (via JavaScript): 1. Enter key on an Edit Box should not submit the form. 2. Enter key on an Edit Box should set focus to the following element (edit box or a submit button). Submit button is the last element in tabIndex order. 3. To submit the form user must: either click the submit button, or press Enter when the submit button has the focus. 4. Must work in any browser.

This is a snippet that works quite good (it sets focus to the next element):

      var elem = document.activeElement;
   
       var tidx  = +(elem.getAttribute('tabindex')) +1,
           elems = document.getElementsByTagName('input');

       for (var i=elems.length; i--;) 
          {
           var tidx2 = elems[i].getAttribute('tabindex');
           if (tidx2 == tidx) elems[i].focus();
          }

The only problem I have is Enter key (keyCode) validation which should precede the code to change focus. I have been testing in FF 32, PaleMoon 25 (FF clone), Chrome 38 & IE 10.

Thank you very much for your time in advance.

P.S. I'm a newbie in JavaScript. I use to work with MS Access where similar problem would be solved within two minutes. I have spent several hours on this simple task but no luck. I have tried many examples that I've found on the web (incl. stackoverflow.com). As to event handling (where I'm trying to test the keyCode) various browsers behave differently.

StreamLine
  • 1
  • 1
  • 1
    What's wrong with using the TAB key to move to the next field? – Weather Vane Oct 31 '14 at 19:11
  • 1
    You realise that taking this approach undermines the established user-interface, with which your users are already familiar, of HTML forms? Unless you're clearly sign-posting this implementation *and* the users have asked for it, consider not doing it. Incidentally, you really need to add HTML to your snippet to make that code meaningful in any way. – David Thomas Oct 31 '14 at 19:16
  • @Weather Vane: Users keep pressing Enter instead of Tab. – StreamLine Nov 01 '14 at 05:21
  • @David Thomas: Yes, I'd like to change the behavior of the form. It's not only me - there are many threads discussing the same problem. Ie. there should be a tool to change Enter behavior... just to replace 13 by 9. – StreamLine Nov 01 '14 at 05:29
  • After some exploration: Firefox & PaleMoon can't handle event. Chrome, IE, Opera & Safari work fine. How can I handle events in Firefox & it's clones? – StreamLine Nov 01 '14 at 07:13
  • I have a solution: `function fncNextCtl(e) // e = event { if (e.keyCode == 13) { var elem = document.activeElement; var tidx = +(elem.getAttribute('tabindex')) +1, elems = document.getElementsByTagName('input'); for (var i=elems.length; i--;) { var tidx2 = elems[i].getAttribute('tabindex'); if (tidx2 == tidx) elems[i].focus(); } e.keyCode = 9; return false; } else { return true; } }` WWB10 onkeydown: `return fncNextCtl(event);` – StreamLine Nov 01 '14 at 09:49

1 Answers1

0

I tried and mixed a lot of found in web and created this one. So far it's working for me... just give it a try

$(document).on('keypress', 'input, select, checkbox, radio, button', function (e) {
    return focusNextOnEnter(e, this);
})

and the function somewhere in your JS file.

 function focusNextOnEnter(e, selector) {
    var longSelector = 'input:visible:enabled:not([readonly="readonly"]), textarea:visible:enabled:not([readonly="readonly"]), select:visible:enabled, button:visible:enabled';
    var keyCode = e.keyCode || e.which;
    if ($(selector).is(':not(textarea)')  // it's not a textarea - enter in text area
            && keyCode === 13 // it's enter key
            && !($(selector).attr('id') === 'submitButton')) // it's not submitButton, save-on-enter here
    {
        e.preventDefault();
        $(longSelector)[$(longSelector).index($(selector)) + 1].focus();
        return true;
    }
}

instead of the last check

$(selector).attr('id') === 'submitButton'

you can always check 

$(selector).is('[type="submit"]')

this will hopefully return what you are looking for i.e. submit on enter on submit button

Rehan Anis
  • 788
  • 1
  • 5
  • 7