[英]Display different type of form by using switch JavaScript
I have a problem.我有个问题。 I want to display different types of forms such as the form for adding, the form for modifying, and the form for deleting based on the user input by using a JavaScript
switch
statement.我想根据用户输入使用 JavaScript
switch
语句显示不同类型的表单,例如添加表单、修改表单和删除表单。 So if the user input "A", the add form will show up, when the user input "B" then the modify form will show up, etc. The problem here is it doesn't matter what I typed in nothing shows up.因此,如果用户输入“A”,则添加表单将显示,当用户输入“B”时,将显示修改表单,等等。这里的问题是我输入的内容无关紧要,什么都不显示。 Can someone explain it to me?
有人可以向我解释一下吗? Thank you.
谢谢你。
Note: The CSS for the forms display: none;
注意:表单的 CSS
display: none;
because I don't want the forms to show up when the page load.因为我不想在页面加载时显示表单。 I just want base on the user input, then the specific form will show.
我只想根据用户输入,然后显示特定的表单。 I want to make the dropdown list instead of typing in the box, but it is not easy to do it.
我想制作下拉列表而不是在框中键入,但这样做并不容易。
var val=document.getElementById("user").value; var check=document.getElementById("enter"); function change(){ switch(val){ case 'A': { document.getElementById("add").style.display="block"; break; } case 'B': { document.getElementById("modify").style.display="block"; break; } case 'C': { document.getElementById("delete").style.display="block"; break; } } } check.addEventListener("click", change);
div#add, div#modify, div#delete{ display: none; }
<div id="add"> <div id="add_task_form"> <button id="add_task">Add New Task</button> <form id="add_form" name="task_form" method="post"> <div id="title_form"> <label for="title">Title</label> <input type="text" name="title" id="title"><br> </div> <div id="description_form"> <label for="description">Description</label> <input type="text" name="description" id="description"><br> </div> <div id="due_date_form"> <label for="due_date">Due Date</label> <input type="text" name="due_date" id="due_date" placeholder="yyyy-mm-dd"><br> </div> <div id="time_form"> <label for="time">Time</label> <input type="text" name="time" id="time" placeholder="hh:mi"><br> </div> <input id="submit_add_form" type="submit" name="submit" value="Save"> </form> <br> </div> </div> <div id="modify"> <div id="modify_task_form"> <button id="modify_task">Modify Task</button> <form id="modify_form" name="modify_form" method="post"> <div id="modify_section"> <label for="modify_com_in">What section?</label> <input type="text" id="modify_com_in" name="modify_com_in" placeholder="Complete or Incomplete"><br> </div> <div id="modify_section_id"> <label for="modify_com_in_id">What ID?</label> <input type="text" id="modify_com_in_id" name="modify_com_in_id"><br> </div> <div id="title_modify_form"> <label for="modify_title">Title</label> <input type="text" name="title" id="modify_title"><br> </div> <div id="description_modify_form"> <label for="modify_description">Description</label> <input type="text" name="description" id="modify_description"><br> </div> <div id="due_date_modify_form"> <label for="due_date">Due Date</label> <input type="text" name="due_date" id="modify_due_date" placeholder="yyyy-mm-dd"><br> </div> <div id="time_modify_form"> <label for="modify_time">Time</label> <input type="text" name="time" id="modify_time" placeholder="hh:mi"><br> </div> <input id="submit_modify_form" type="submit" name="modify" value="Modify"> </form> <br> </div> </div> <div id="delete"> <div id="delete_task_form"> <button id="delete_task">Delete Task</button> <form id="delete_form" name="delete_form" method="post"> <div id="delete_section"> <label for="delete_com_in">What section?</label> <input type="text" id="delete_com_in" name="delete_com_in" placeholder="Complete or Incomplete"><br> </div> <div id="delete_section_id"> <label for="delete_com_in_id">What ID?</label> <input type="text" id="delete_com_in_id" name="delete_com_in_id"><br> </div> <input id="submit_delete_form" type="submit" name="delete" value="Delete"> </form> <br> </div> </div> <label for="user">User</label> <input id="user" type="text" name="user"> <input type="button" value="Enter" id="enter">
Try this to use a dropdown menu instead:试试这个来使用下拉菜单:
<label for="action">Choose an action:</label>
<select id="action" name="action" onchange='onSelectChangeHandler()'>
<option value="add">Add</option>
<option value="modify">Edit</option>
<option value="delete">Delete</option>
</select>
and the Javascript code:和 Javascript 代码:
function onSelectChangeHandler() {
var val = document.getElementById("action").value;
switch (val) {
case "add":
// document.getElementById("add").style.display="block";
console.log("Show form Add");
break;
case "modify":
// document.getElementById("modify").style.display = "block";
console.log("Show form Modify");
break;
case "delete":
// document.getElementById("delete").style.display = "block";
console.log("Show form Delete");
break;
}
}
Just remove the comments
if it works.如果有效,只需删除
comments
。
But you could also remove the switch statement by simply doing:但是您也可以通过简单地执行以下操作来删除 switch 语句:
function onSelectChangeHandler() {
var val = document.getElementById("action").value;
document.getElementById(val).style.display="block";
console.log("Show form ", val);
}
That is if the option value
(s) are the exact same as their id
tags counterparts也就是说,如果选项
value
(s)与其对应的id
标签完全相同
You need to get the value of user
input inside change
function.您需要在
change
函数中获取user
输入的值。
var check=document.getElementById("enter"); function change(){ var val=document.getElementById("user").value; switch(val){ case 'A': { document.getElementById("add").style.display="block"; break; } case 'B': { document.getElementById("modify").style.display="block"; break; } case 'C': { document.getElementById("delete").style.display="block"; break; } } } check.addEventListener("click", change);
div#add, div#modify, div#delete{ display: none; }
<div id="add"> <div id="add_task_form"> <button id="add_task">Add New Task</button> <form id="add_form" name="task_form" method="post"> <div id="title_form"> <label for="title">Title</label> <input type="text" name="title" id="title"><br> </div> <div id="description_form"> <label for="description">Description</label> <input type="text" name="description" id="description"><br> </div> <div id="due_date_form"> <label for="due_date">Due Date</label> <input type="text" name="due_date" id="due_date" placeholder="yyyy-mm-dd"><br> </div> <div id="time_form"> <label for="time">Time</label> <input type="text" name="time" id="time" placeholder="hh:mi"><br> </div> <input id="submit_add_form" type="submit" name="submit" value="Save"> </form> <br> </div> </div> <div id="modify"> <div id="modify_task_form"> <button id="modify_task">Modify Task</button> <form id="modify_form" name="modify_form" method="post"> <div id="modify_section"> <label for="modify_com_in">What section?</label> <input type="text" id="modify_com_in" name="modify_com_in" placeholder="Complete or Incomplete"><br> </div> <div id="modify_section_id"> <label for="modify_com_in_id">What ID?</label> <input type="text" id="modify_com_in_id" name="modify_com_in_id"><br> </div> <div id="title_modify_form"> <label for="modify_title">Title</label> <input type="text" name="title" id="modify_title"><br> </div> <div id="description_modify_form"> <label for="modify_description">Description</label> <input type="text" name="description" id="modify_description"><br> </div> <div id="due_date_modify_form"> <label for="due_date">Due Date</label> <input type="text" name="due_date" id="modify_due_date" placeholder="yyyy-mm-dd"><br> </div> <div id="time_modify_form"> <label for="modify_time">Time</label> <input type="text" name="time" id="modify_time" placeholder="hh:mi"><br> </div> <input id="submit_modify_form" type="submit" name="modify" value="Modify"> </form> <br> </div> </div> <div id="delete"> <div id="delete_task_form"> <button id="delete_task">Delete Task</button> <form id="delete_form" name="delete_form" method="post"> <div id="delete_section"> <label for="delete_com_in">What section?</label> <input type="text" id="delete_com_in" name="delete_com_in" placeholder="Complete or Incomplete"><br> </div> <div id="delete_section_id"> <label for="delete_com_in_id">What ID?</label> <input type="text" id="delete_com_in_id" name="delete_com_in_id"><br> </div> <input id="submit_delete_form" type="submit" name="delete" value="Delete"> </form> <br> </div> </div> <label for="user">User</label> <input id="user" type="text" name="user"> <input type="button" value="Enter" id="enter">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.