Callback on HTML Form submission

Dash Python
1

Hi there,

I’m trying to create a form using the html.Form component. I need to manage the form submission using a callback. Now I have a submit button, and I’ve linked the callback to the n_clicks property with no issue. My problem is when the user hits enter in one of the Form fields. This leads to a full POST, with page refresh and of course it doesn’t call the callback function.

Any thoughts on how can I prevent the form submission, and instead use a server side -or client side- callback function when the press enter in any form field -assuming the form is valid for submission-?

Thanks.

1 Like
2

One option would be to replace the Form component by a Div and use the Keyboard component to catch the enter key press,

1 Like
3

dash_bootstrap_components.Form has a prop prevent_default_on_submit (which is actually true by default) which should do what you want. If you just want to use the form there’s no need to include the stylesheets if you don’t want them.

BTW I noticed the doc string for that prop makes no sense, so don’t read too much into it.

4

Thanks @tcbegley. Worked like a charm.

5

Thanks @Emil , but that would capture every single key stroke in the form. Using dbc Form worked.