skip to Main Content

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


  1. $('#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 **
    
    Login or Signup to reply.
  2. This isexpected behaviour. The disabled property prevents the element being submitted, you should use readonly instead.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search