Display different type of form by using switch JavaScript

Question

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. 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. Can someone explain it to me? Thank you.

Note: The CSS for the forms 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">

Answer 1

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:

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.

But you could also remove the switch statement by simply doing:

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

Answer 2

You need to get the value of user input inside change function.

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