title: How to display another div after form submit in Chat window
body: <p>I have created an index html file which has chatwindow which looks likes this.</p>
  
  <p><a href="https://i.stack.imgur.com/PPGoy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PPGoy.png" alt="enter image description here"></a></p>
  
  <p>At the bottom of submit button there an area to accept text. How to hide that part or disable that part and activate later the form is filled and clicked submit button. I tried to hide the div class but throwing an error.</p>
  
  <p>Here is my html code:</p>
  
  <pre><code>&lt;html&gt;
  
     &lt;head&gt;
        &lt;title&gt;Chatbot&lt;/title&gt;
        &lt;!--Let browser know website is optimized for mobile--&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
  
        &lt;!--Import Google Icon Font--&gt;
        &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
        &lt;link href="https://fonts.googleapis.com/css?family=Raleway:500&amp;display=swap" rel="stylesheet"&gt;
  
        &lt;!--Import Font Awesome Icon Font--&gt;
        &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
           integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" /&gt;  
  
        &lt;!--Import materialize.css--&gt;
        &lt;link rel="stylesheet" type="text/css" href="static/css/materialize.min.css"&gt;
  
        &lt;!--Main css--&gt;
        &lt;link rel="stylesheet" type="text/css" href="static/css/style.css"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
        &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"&gt;
        &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
  
  
  
      &lt;style&gt;
      input[type="date"] {
          position: relative;
      }
  
      /* create a new arrow, because we are going to mess up the native one
      see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
      input[type="date"]:after {
          content: "\25BC";
          color: #555;
          padding: 0 5px;
      }
  
      /* change color of symbol on hover */
      input[type="date"]:hover:after {
          color: #bf1400;
      }
  
      /* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
      input[type="date"]::-webkit-calendar-picker-indicator {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: auto;
          height: auto;
          color: transparent;
          background: transparent;
      }
  
      /* adjust increase/decrease button */
      input[type="date"]::-webkit-inner-spin-button {
          z-index: 1;
      }
  
       /* adjust clear button */
       input[type="date"]::-webkit-clear-button {
           z-index: 1;
       }
  
      &lt;/style&gt;   
  
  
     &lt;/head&gt;
     &lt;body&gt;
  
  
  
  
     &lt;!-- seperate containter --&gt;
        &lt;div class="container"&gt;
           &lt;!-- Modal for rendering the charts, declare this if you want to render charts, 
           else you remove the modal --&gt;
           &lt;div id="modal1" class="modal"&gt;
              &lt;canvas id="modal-chart"&gt;&lt;/canvas&gt;
           &lt;/div&gt;
  
          &lt;!--chatbot widget --&gt;
           &lt;div class="widget"&gt;
              &lt;div class="chat_header"&gt;
  
                 &lt;!--Add the name of the bot here --&gt;
                 &lt;span class="chat_header_title"&gt;Dima Business&amp;nbsp;Chat&lt;/span&gt;
                 &lt;span class="dropdown-trigger" href='#' data-target='dropdown1'&gt;
                    &lt;i class="material-icons"&gt;
                    more_vert
                    &lt;/i&gt;
                 &lt;/span&gt;
  
  
                 &lt;!-- Dropdown menu--&gt;
                 &lt;ul id='dropdown1' class='dropdown-content'&gt;
                    &lt;li&gt;&lt;a href="#" id="clear"&gt;Clear&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" id="restart"&gt;Restart&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" id="close" &gt;Close&lt;/a&gt;&lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;!--Chatbot contents goes here --&gt;
              &lt;div class="chats" id="chats"&gt;
                 &lt;div class="clearfix"&gt;
  
              &lt;!-- this is form code externally added --&gt;
              &lt;!-- Start Contact Section --&gt;
  
   &lt;div class="w3-container w3-light-grey w3-padding-32 w3-padding-large" id="contact"&gt;
    &lt;div class="w3-content" style="max-width:600px"&gt;
      &lt;h4 class="w3-center"&gt;&lt;b&gt;Please fill the form to continue&lt;/b&gt;&lt;/h4&gt;
  
      &lt;script type="text/javascript"&gt;var submitted=false;&lt;/script&gt;
  
      &lt;!--Update the URL for thank you page on form submit --&gt;
      &lt;iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"
      onload="if(submitted) {window.location='';}"&gt;&lt;/iframe&gt;
  
      &lt;!-- Update the Google forms URL in action--&gt;
      &lt;form class= 'form1' action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfDHBaSVqkaf1BLTQ1MeRa1NH8OGw4Tpj_SZUvRj-QUTYu9Qw/formResponse" method="post" target="hidden_iframe" onsubmit="return validateForm(); "&gt;
  
  
        &lt;div class="w3-section"&gt;
          &lt;label&gt;Name&lt;/label&gt;
          &lt;input class="w3-input w3-border" type="text" placeholder="Name" id="name" required name="entry.482263238"&gt;
        &lt;/div&gt;
        &lt;div class="w3-section"&gt;
          &lt;label&gt;Email&lt;/label&gt;
          &lt;input class="w3-input w3-border" type="text" placeholder="Email" id="email" required name="entry.227926006"&gt;
        &lt;/div&gt;
        &lt;div class="w3-section"&gt;
          &lt;label&gt;Phone&lt;/label&gt;
          &lt;input class="w3-input w3-border" type="text" placeholder="Phone" id="phone" required name="entry.30319006"&gt;
        &lt;/div&gt;
  
        &lt;div class="w3-section"&gt;
          &lt;button class="w3-button w3-block w3-black w3-margin-bottom" type="submit"&gt;submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;               
  
              &lt;!-- end of the form code externally added --&gt;
  
              &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!--keypad for user to type the message --&gt;
              &lt;div class="keypad"&gt;
                 &lt;textarea id="userInput" placeholder="Type a message..." class="usrInput"&gt;&lt;/textarea&gt;
                 &lt;div id="sendButton"&gt;&lt;i class="fa fa-paper-plane" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
  
           &lt;!--bot profile--&gt;
           &lt;div class="profile_div" id="profile_div"&gt;
              &lt;img class="imgProfile" src="static/img/RestoBotAvatar.png" /&gt;
           &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;!--JavaScript at end of body for optimized loading--&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="static/js/materialize.min.js"&gt;&lt;/script&gt;
  
        &lt;!--Main Script --&gt;
        &lt;script type="text/javascript" src="static/js/script.js"&gt;&lt;/script&gt;
  
        &lt;!--Chart.js Script --&gt;
        &lt;script type="text/javascript" src="static/js/chart.min.js"&gt;&lt;/script&gt;
  
     &lt;/body&gt;
  &lt;footer&gt;
  
  
  
  
  
      &lt;script type="text/javascript"&gt;
      function validateName() {
              var name = document.getElementById('name').value;
              if(name.length == 0) {
                alert("Name can't be blank") ;
                return false;
  
              }
              if (!name.match(/^[a-zA-Z]{3,}(?: [a-zA-Z]+){0,2}$/)) {
                alert("Please enter your correct name") ;//Validation Message
                return false;
              }
              return true;
            }
  
            function validatePhone() {
              var phone = document.getElementById('phone').value;
              if(phone.length == 0) {
                alert("Phone number can't be blank") ;//Validation Message
                return false;
              }
  
              if(!phone.match(/^[0]?[789]\d{9}$/)) {
               alert("Please enter a correct phone number") ;//Validation Message
               return false;
             }
  
             return true;
  
           }
  
           function validateEmail () {
  
            var email = document.getElementById('email').value;
            if(email.length == 0) {
              alert("Email can't be blank") ;//Validation Message
              return false;
  
            }
  
            if(!email.match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)) {
              alert("Please enter a correct email address") ;//Validation Message
              return false;
  
            }
  
            return true;
  
          }
  
  
          function validateForm() {
            if (!validateName() || !validatePhone() || !validateEmail()) {
  
              alert("Form not submitted");//Validation Message
              return false;
            }
            else {
              submitted=true;
              return true;
            }
          }
          &lt;/script&gt;
          &lt;script&gt;
          const form = document.querySelector(".w3-container");
  
  
  function validateForm() {
  
  form.style.visibility = "hidden";
  }
          &lt;/script&gt;
  
  
  
  &lt;!-- End Contact Section --&gt;
  
  &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>