0

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

Shlomy Z
  • 301
  • 2
  • 14

2 Answers2

0

This isexpected behaviour. The disabled property prevents the element being submitted, you should use readonly instead.

timchessish
  • 136
  • 5
-3

$('#myForm').on('submit',function(event){
   event.preventDefault();
   $('input').attr('disabled','disabled');
});
   
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    </head>
    <body>
    <form id="myForm" method="post" >
        <input type="text" name="username" required>
        <input type="submit" value="Submit">
    </form>


    </body>
    </html>
**Please Check Code. I hope this code you to get right solution **
Mitali Patel
  • 395
  • 2
  • 9