Fatal编程技术网
  • javascript/
  • Javascript 如何在聊天窗口中提交表单后显示另一个div

Javascript 如何在聊天窗口中提交表单后显示另一个div

javascript html jquery css

Javascript 如何在聊天窗口中提交表单后显示另一个div,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我已经创建了一个索引html文件，它有一个聊天窗口，看起来像这样 在submit按钮的底部有一个接受文本的区域。如何隐藏该部分或禁用该部分并在以后激活表单填写完毕并单击提交按钮。我试图隐藏div类，但抛出了一个错误 以下是我的html代码： <html> <head> <title>Chatbot</title> <!--Let browser know website is optimized for mo

我已经创建了一个索引html文件，它有一个聊天窗口，看起来像这样

在submit按钮的底部有一个接受文本的区域。如何隐藏该部分或禁用该部分并在以后激活表单填写完毕并单击提交按钮。我试图隐藏div类，但抛出了一个错误

以下是我的html代码：

<html>

   <head>
      <title>Chatbot</title>
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Raleway:500&display=swap" rel="stylesheet">

      <!--Import Font Awesome Icon Font-->
      <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" />  

      <!--Import materialize.css-->
      <link rel="stylesheet" type="text/css" href="static/css/materialize.min.css">

      <!--Main css-->
      <link rel="stylesheet" type="text/css" href="static/css/style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">




    <style>
    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;
     }

    </style>   


   </head>
   <body>




   <!-- seperate containter -->
      <div class="container">
         <!-- Modal for rendering the charts, declare this if you want to render charts, 
         else you remove the modal -->
         <div id="modal1" class="modal">
            <canvas id="modal-chart"></canvas>
         </div>

        <!--chatbot widget -->
         <div class="widget">
            <div class="chat_header">

               <!--Add the name of the bot here -->
               <span class="chat_header_title">Dima Business&nbsp;Chat</span>
               <span class="dropdown-trigger" href='#' data-target='dropdown1'>
                  <i class="material-icons">
                  more_vert
                  </i>
               </span>


               <!-- Dropdown menu-->
               <ul id='dropdown1' class='dropdown-content'>
                  <li><a href="#" id="clear">Clear</a></li>
                  <li><a href="#" id="restart">Restart</a></li>
                  <li><a href="#" id="close" >Close</a></li>
               </ul>
            </div>

            <!--Chatbot contents goes here -->
            <div class="chats" id="chats">
               <div class="clearfix">

            <!-- this is form code externally added -->
            <!-- Start Contact Section -->

 <div class="w3-container w3-light-grey w3-padding-32 w3-padding-large" id="contact">
  <div class="w3-content" style="max-width:600px">
    <h4 class="w3-center"><b>Please fill the form to continue</b></h4>

    <script type="text/javascript">var submitted=false;</script>

    <!--Update the URL for thank you page on form submit -->
    <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"
    onload="if(submitted) {window.location='';}"></iframe>

    <!-- Update the Google forms URL in action-->
    <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(); ">


      <div class="w3-section">
        <label>Name</label>
        <input class="w3-input w3-border" type="text" placeholder="Name" id="name" required name="entry.482263238">
      </div>
      <div class="w3-section">
        <label>Email</label>
        <input class="w3-input w3-border" type="text" placeholder="Email" id="email" required name="entry.227926006">
      </div>
      <div class="w3-section">
        <label>Phone</label>
        <input class="w3-input w3-border" type="text" placeholder="Phone" id="phone" required name="entry.30319006">
      </div>

      <div class="w3-section">
        <button class="w3-button w3-block w3-black w3-margin-bottom" type="submit">submit</button>
      </div>
    </form>
</div>
</div>               

            <!-- end of the form code externally added -->

            </div>
            </div>

            <!--keypad for user to type the message -->
            <div class="keypad">
               <textarea id="userInput" placeholder="Type a message..." class="usrInput"></textarea>
               <div id="sendButton"><i class="fa fa-paper-plane" aria-hidden="true"></i></div>
            </div>
         </div>

         <!--bot profile-->
         <div class="profile_div" id="profile_div">
            <img class="imgProfile" src="static/img/RestoBotAvatar.png" />
         </div>
      </div>

      <!--JavaScript at end of body for optimized loading-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script type="text/javascript" src="static/js/materialize.min.js"></script>

      <!--Main Script -->
      <script type="text/javascript" src="static/js/script.js"></script>

      <!--Chart.js Script -->
      <script type="text/javascript" src="static/js/chart.min.js"></script>

   </body>
<footer>





    <script type="text/javascript">
    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;
          }
        }
        </script>
        <script>
        const form = document.querySelector(".w3-container");


function validateForm() {

form.style.visibility = "hidden";
}
        </script>



<!-- End Contact Section -->

</footer>
</html>


聊天机器人
输入[type=“date”]{
位置：相对位置；
}
/*创建一个新的箭头，因为我们将破坏本地箭头
请参阅下面的“符号列表”，如果您需要其他符号，也可以尝试添加一个字体很棒的图标*/
输入[type=“date”]：在{
内容：“\25BC”；
颜色：#555；
填充：0 5px；
}
/*更改悬停时符号的颜色*/
输入[type=“date”]：悬停：之后{
颜色：#bf1400；
}
/*使本机箭头不可见，并将其延伸到整个字段，以便可以单击输入字段中的任意位置以触发本机日期选择器*/
输入[type=“date”]：-webkit日历选取器指示器{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：自动；
高度：自动；
颜色：透明；
背景：透明；
}
/*调整增加/减少按钮*/
输入[type=“date”]：：-webkit内部旋转按钮{
z指数：1；
}
/*调整清除按钮*/
输入[type=“date”]：：-webkit清除按钮{
z指数：1；
}
迪玛商务聊天
更多

    

  • 

  • 

  • 


请填写表格继续
var=false；
名称
电子邮件
电话
提交
函数validateName（）{
var name=document.getElementById（'name'）。值；
如果（name.length==0）{
警报（“名称不能为空”）；
返回false；
}
if（！name.match（/^[a-zA-Z]{3，}（？[a-zA-Z]+）{0,2}$/）{
警报（“请输入正确的名称”）；//验证消息
返回false；
}
返回true；
}
函数validatePhone（）{
var phone=document.getElementById（'phone'）。值；
如果（phone.length==0）{
警报（“电话号码不能为空”）；//验证消息
返回false；
}
如果（！phone.match（/^[0]？[789]\d{9}$/）{
警报（“请输入正确的电话号码”）；//验证消息
返回false；
}
返回true；
}
函数validateEmail（）{
var email=document.getElementById（'email'）。值；
如果（email.length==0）{
警报（“电子邮件不能为空”）；//验证消息
返回false；
}
如果（！email.match（/^[A-Za-z\.\u\-[0-9]*[@][A-Za-z]*[\.][A-z]{2,4}$/）{
警报（“请输入正确的电子邮件地址”）；//验证消息
返回false；
}
返回true；
}
函数validateForm（）{
如果（！validateName（）| |！validatePhone（）| |！validateEmail（））{
警报（“表单未提交”）；//验证消息
返回false；
}
否则{
提交=真实；
返回true；
}
}
const form=document.querySelector（“.w3容器”）；
函数validateForm（）{
form.style.visibility=“hidden”；
}
实现这一点的方法是首先使用
const textarea=document.querySelector（“#userInput”）；
选择要隐藏/禁用的textarea元素

现在您已经选择了它，可以使用以下命令禁用它：
textarea.disabled=true；
（这将导致它显示在页面上，但无法与它交互）

或者，您可以使用
textarea.style.display=“none”
将其完全隐藏

然后，您可以使您的
validateForm
功能重新启用/显示它（表单提交后）：

完整代码：

    const textarea = document.querySelector("#userInput"); //select the textarea element
    textarea.disabled = true; //disable it
    textarea.style.display = "none"; //or completely hide it

    function validateForm() {
      if (!validateName() || !validatePhone() || !validateEmail()) {
        alert("Form not submitted"); //Validation Message
        return false;
      } else {
        submitted = true;
        form.style.display = "none";
        textarea.disabled = false; //enable it back
        textarea.style.display = "inline-block"; //or display it back
        return true;
      }
    }
它的工作完全符合我的要求，但问题是一旦按下提交按钮，聊天窗口也会关闭，如果打开的新表单显示隐藏的文本区域，则会再次关闭。当我不添加上述脚本时，效果很好，但当我添加上述脚本时，聊天窗口会关闭，如何解决它。这是因为代码中的这一行：“onload=”if（submitted）{window.location=”；“}”。您的validateForm（）函数将submitted设置为“true”，以便重新加载表单。如果删除它，它应该可以工作。 
    const textarea = document.querySelector("#userInput"); //select the textarea element
    textarea.disabled = true; //disable it
    textarea.style.display = "none"; //or completely hide it

    function validateForm() {
      if (!validateName() || !validatePhone() || !validateEmail()) {
        alert("Form not submitted"); //Validation Message
        return false;
      } else {
        submitted = true;
        form.style.display = "none";
        textarea.disabled = false; //enable it back
        textarea.style.display = "inline-block"; //or display it back
        return true;
      }
    }