在“聊天"窗口中提交表单后如何显示另一个div [英] How to display another div after form submit in Chat window
本文介绍了在“聊天"窗口中提交表单后如何显示另一个div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个索引html文件，该文件具有如下所示的聊天窗口.
I have created an index html file which has chatwindow which looks likes this.
在提交"按钮的底部，有一个接受文本的区域.如何隐藏该部分或禁用该部分并在以后激活该表单，然后单击提交"按钮.我试图隐藏div类，但抛出错误.
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.
这是我的html代码:
Here is my html code:
<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 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>
推荐答案
您将采用的方法是首先选择要使用const textarea = document.querySelector("#userInput");隐藏/禁用的textarea元素.
The way you would approach this is to first select the textarea element you want to hide/disable with const textarea = document.querySelector("#userInput");.
现在您已经选择了它，您可以通过以下方式禁用它:textarea.disabled = true;(这将使其显示在页面上，但无法与之交互).
Now that you have it selected, you can disable it with: textarea.disabled = true; (this will cause it to show on the page but without the possibility to interact with it).
或者，您可以使用textarea.style.display = "none";将其完全隐藏.
Or, you can completely hide it with textarea.style.display = "none";.
然后，您可以使validateForm函数启用/显示回去(一旦提交表单):
Then, you can make your validateForm function enable/display it back (once the form has been submitted):
function validateForm() {
if (!validateName() || !validatePhone() || !validateEmail()) {
alert("Form not submitted"); //Validation Message
return false;
} else {
submitted = true;
form.style.display = "none";
textarea.disabled = false;
textarea.style.display = "inline-block";
return 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;
}
}
这篇关于在“聊天"窗口中提交表单后如何显示另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
