How can I stop a Form from Saving when the Enter key is hit?

[lexiefall]

Hi everyone,

Is there a way I can prevent a Form from saving when a user hits the Enter key to move between fields (instead of using Tab?)

A lot of users hit the Enter key and then have trouble getting back into their Form.

Cheers,

Lexie

[mlauer · Accepted solution]

place a button before ok/save or whatever button:

configure button, Button label is a space character:

in forms settings write Custom CSS:

.kob_button_transparent input[type='submit'] {

    background-color: Transparent;

    background-image: none;

    background-repeat: no-repeat;

    border: none;

    cursor: pointer;

    overflow: hidden;

    outline: none;

}

[espradli]

This worked perfectly! Thank you. I find it very annoying that the enter key functions like a save/submit button.

[shaunlub]

Einfach wunderbar. Thank you very much.

[andrew_x_childr]

Can anyone explain why and how this works?  I want to use it on a complicated form that has four buttons and some conditional display rules and would like to know what I'm getting myself into.

[claire_allen]

I could not get this to work, can anyone help me?

I went to Form Settings added this to the Custom CSS, but pressing Enter still submitted the form

[andrew_x_childr]

Hi Claire,

The first thing I would check is to make sure that you have an invisible button on your form that is placed somewhere above the OK button (or Submit button, or whatever name you have on the button that Enter activates).  Once you have that invisible button on your form, make sure it has the CSS class kob_button_transparent and all other settings on the button control match the settings in Manfred's example.  Does that help?

(I did end up using this solution on my form.  I think the way it works is that the Enter key is automatically assigned to the button with type='submit' that is in the highest vertical position on the form.)

[fslassiter]

This worked very well for me also. I am working on a solution where we scan in a barcode and then add more info into a form. The scanner was prompting the Nintex form to be saved. This solution has fixed that. I also added a little jQuery magic to help it. Seems that this solution keeps the form from being saved, however still refreshed the page. I fixed that by adding the following jQuery:

NWF$('.button_transparent').click(function( event ) {
event.preventDefault();

});

The preventDefault() keeps the button from saving. 

Thanks for the post on the buttons, another nice trick for Nintex!

[claire_allen]

Hello Andrew,

I have added a button as mentioned above and for some reason it does not work for me,

Can you assit any further?

Regards

Claire

[claire_allen]

Sorry one more thing, does it make any difference if you are using a repeating section on the form?

Regards

Claire