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

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;

}

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

Einfach wunderbar. Thank you very much.

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.

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

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.)

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!

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

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

Regards

Claire

Hi Claire,

If you have set up the button settings exactly as shown in Manfred's example, the only other thing I can think of that might be causing problems is if you don't have the custom CSS set up correctly.  Here's a screenshot of what it should look like:

I have not tested it with a repeating section, so in order to be sure it works I would first test my form without a repeating section and make sure I can get this behavior to work, then add the repeating section back in (or revert to a version of the form with the repeating section).

Does this help?

Hi Andrew,

I've made sure that I followed the instructions given and that my CSS looks the same, and when I go into the form and Publish I can still press enter and the form saves,

One questions is what should the name of the button be as the instructions shows a Green line on that item but no name, should the button be named for this to work?

Sorry I cannot seem to get this to work for me :-(

What worked for me was to use a single space as the button name.

Hi Andrew,

Just had another go, wont let this get me!

One thing I was doing wrong which clearly said in the instructions was but the button above the Submit button.

Works on trying to press enter in a repeating section.

Thank you all so much for your help :-)

This works only one time when i open the new form for the first time.Once the form is closed and when i open a 2nd new form again and hit ENTER it's getting saved. Any Ideas for the error ??

I am using Nintex forms for office 365.

How is the second form being opened? From the first form? In a new window or a new tab?

Hello Shaunlab..Thanks for your response..Below are the results for the above code.

1. If i am opening the newform.aspx page in the same tab and after I do the look up column which is a required field on the form, it's working perfectly and if I scroll down the form for the bottom and again hit enter the form is being saved which shouldn't happen ideally.
2. If I am opening the newform.aspx page in the new tab and after I do the look up of one column which is a required field on the form and hit enter it's getting saved which shouldn't happen.
3. If I am opening the second item after this getting saved the functionality is not working after I do the look up column which is a required field on the form it's not working.

Hi,

How is the second form opened? By a manual mouse click on a link OR are you using the URL to loop back?

I use the solution mentioned above, but always back out of the form to let users re-open the form afresh, as required. I usuall use the &Source= at the end of the new form link to make it loop back to the starting web page (which in my case is often the site home page) rather than the list itself.

Javascript really needs to have a new freshly-loaded page fore everything to run again from scratch - which is likely the problem you are having with following forms.

Hi, 

I have tried your solution, unfortunately it redirects me when pressing "enter" in a repeating section. 

i'm curious if this is an on prem solution vs online? as i'm using office 365

thanks 

danielle

I had the same problem, and I just added a checkbox to the form, added a rule for the two buttons Submit and Cancel that if the box wasn't checked, the buttons are disabled. If they hit enter, nothing happens until they are finished and check the box.

Manfred Lauer‌'s solution works great for me.  Only minor update to the CSS - the cursor always changed when hovering on the hidden button, so I added this to the CSS...

height: 0% !important;

...so that the button has no height, which means there's nothing to hover over.

I've tried following the instructions written in the posts but this doesn't seem to be working for me.

• I've created the new button
• Set the Button to Javascript under 'Button Action'
• Put in a single character space in 'Button Label' and 'Name'
• Set visible to 'No'
• Entered "kob_button_transparent" into 'CSS Class'
• Put "javascript: 1===1;" into 'Client Click'

then went into the Settings-Form and added the following code into the 'Custom CSS' field beneath all the existing code.

.kob_button_transparent input[type='submit'] {

    background-color: Transparent;

    background-image: none;

    background-repeat: no-repeat;

    border: none;

    cursor: pointer;

    overflow: hidden;

    outline: none;

}

I've tried and tested this after saving and publishing, but this still saves when you hit the 'enter' key.

Where am I going wrong?

Thanks

Does anyone know of a solution for this issue on a Responsive Form using Nintex Forms for O365?