3

I have a form in React that I want to be unsubmittable during the following 2 conditions:

  1. JS is disabled
  2. My App bundle hasn't been downloaded / parsed yet

The app is server side rendered, so the form is visible before the app bundle has finished downloading on the client side. If the form is submitted before the bundle finishes, the form will make a request and append the form parameters to the url.

I've tried setting blank settings like

<form onSubmit="return false">
</form>

Setting the form to disabled initially and then enabling it on componentDidMount() seems like a solution, but I'm wondering if there's some HTML attribute I can add to the form or submit button instead.

Jon
  • 5,945
  • 4
  • 21
  • 31
  • Possible duplicate of [JavaScript code to stop form submission](http://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) – Pineda Nov 28 '16 at 23:12
  • Hmn, don't think this works (JS is disabled) and tried the onSubmit handler already – Jon Nov 28 '16 at 23:43
  • 1
    The only thing I can suggest is adding the `disabled` property to your inputs and submit buttons (if you have one). – Pineda Nov 28 '16 at 23:57
  • Seems reasonable. Do you know what the conditional might look like for setting the fields to be disabled? – Jon Nov 29 '16 at 01:02
  • I do not get it, if JS is disabled or your app hasn't been downloaded, there will be almost nothing on the page. Or are you using SSR? – kkkkkkk Nov 29 '16 at 01:56
  • yes, server side rendered – Jon Nov 29 '16 at 22:05

1 Answers1

0

Disable your submit button and enable at the end of your JavaScript module.

This will leave the button disabled if JavaScript is disabled, and is only activated after the JavaScript module has been executed.

// In your JS module
document.getElementById('submit').disabled = false
<form>
  <input id='submit' type='submit' disabled />
</form>

Keep in mind though that this should in no way be used as a security measure. Code on the client is inherently under the user's control and can be manipulated by the user without any restrictions.

TimoStaudinger
  • 41,396
  • 16
  • 88
  • 94
  • This is the "enabling on componentDidMount" solution that I mentioned in the question. It for sure would work, was just hoping that there would be some sort of conditional flag I could use in my jsx, or some sort of native html tag I could add to the
    to disable it initially (with the js bundle then overriding it)
     – Jon Nov 29 '16 at 22:08