防止表单提交与js禁用作出反应

Question

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.

Answer 1

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.