I would like to prevent the user to make changes on a form while the submission is in progress.
For that, I’ve implemented the form onsubmit callback and set each of the fields to be disabled.
The problem is, when I do that, the form is submitted without the form data.
code sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myForm" method="post" onsubmit="handleSubmit(event)">
<input type="text" name="username" required>
<input type="submit" value="Submit">
</form>
<script>
function handleSubmit(event) {
const formElm = document.getElementById("myForm");
const formElements = formElm.elements;
for (let i = 0; i < formElements.length; i++) {
formElements[i].disabled = true;
}
return true;
}
</script>
</body>
</html>
Need your help, please.
Thanks
2
Answers
This isexpected behaviour. The disabled property prevents the element being submitted, you should use readonly instead.