使用 switch JavaScript 顯示不同類型的表單

Question

我有個問題。 我想根據用戶輸入使用 JavaScript switch語句顯示不同類型的表單，例如添加表單、修改表單和刪除表單。 因此，如果用戶輸入“A”，則添加表單將顯示，當用戶輸入“B”時，將顯示修改表單，等等。這里的問題是我輸入的內容無關緊要，什么都不顯示。 有人可以向我解釋一下嗎？ 謝謝你。

注意：表單的 CSS display: none; 因為我不想在頁面加載時顯示表單。 我只想根據用戶輸入，然后顯示特定的表單。 我想制作下拉列表而不是在框中鍵入，但這樣做並不容易。

 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">

Answer 1

試試這個來使用下拉菜單：

<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>

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

如果有效，只需刪除comments 。

但是您也可以通過簡單地執行以下操作來刪除 switch 語句：

function onSelectChangeHandler() {
    var val = document.getElementById("action").value;
    document.getElementById(val).style.display="block";
    console.log("Show form ", val);
}

也就是說，如果選項value （s）與其對應的id標簽完全相同

Answer 2

您需要在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">