I want to block all body after I click any button on page. How I can do it?

Question

this is button in page if I click any button I wanna to block all body

Based on my understanding, you want to disable the page controls after the user clicks the button so he would not modify anything. There are many examples available to achieve this requirement using JS and CSS. I suggest you could refer to [this answer](https://stackoverflow.com/a/22608493/10309381) or [this article](https://code-boxx.com/non-editable-text-field-html-javascript/). It may help you get an idea of how to proceed to achieve this requirement. — Deepak-MSFT, Sep 21 '22 at 06:30
because if the user click tow times on any click I have exception and I want to stop this exception — osama osama, Sep 21 '22 at 07:22
I want to make a block for all page, not just for text, even the button. I want to stop it after the first click on the button — osama osama, Sep 21 '22 at 07:42
you could check the code example I share in the answer. It may help you to achieve your requirement. — Deepak-MSFT, Sep 22 '22 at 03:27

score 0 · Accepted Answer · answered Sep 22 '22 at 03:26

You could try to add the page/ Form contents to the Fieldset tag and using the JS code, you could try to add the disabled="disabled" attribute on the button click. It could help you disable the controls.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>Demo</title>
      <script>
         function myFunction() {
                   document.getElementsByTagName("fieldset")[0].setAttribute("disabled", "disabled"); 
                   
                 }
              
      </script>
   </head>
   <body>
      <h1>Test Form</h1>
      <br>
      <form>
         <fieldset >
            <table>
               <tr>
                  <td><label for="name">Enter name:</label></td>
                  <td><input type="text" name="name" value="" id="name" /></td>
               </tr>
               <tr>
                  <td><label for="password">Enter password:</label></td>
                  <td><input type="password" name="password" id="password"/></td>
               </tr>
               <tr>
                  <td><label for="email">Enter Email:</label></td>
                  <td  
                     ><input type="email" name="email" value="" id="mail"/></td>
               </tr>
               <tr>
                  <td><label for="gender" class="label">Select Gender:</label></td>
                  <td>  
                     <input type="radio" name="gender" id="gendermale" value="male"/>  
                     <label for="gendermale">male</label>  
                     <input type="radio" name="gender" id="genderfemale" value="female"/>  
                     <label for="genderfemale">female</label>  
                  </td>
               </tr>
               <tr>
                  <td><label for="country" >Select Country:</label></td>
                  <td>
                     <select name="country" id="country">
                        <option value="india">india</option>
                        <option value="pakistan">pakistan</option>
                        <option value="africa">africa</option>
                        <option value="china">china</option>
                        <option value="other">other</option>
                     </select>
                  </td>
               </tr>
               <tr>
                  <td colspan="2">
                     <div align="right"><input type="submit" id="register_0" value="Submit" onclick="myFunction()"/>  </div>
                  </td>
               </tr>
            </table>
         </fieldset>
      </form>
   </body>
</html>

Output:

You could test this example on your side and further modify the code according your requirements.

I want to block all body after I click any button on page. How I can do it?

1 Answers1