Need to change form dynamically

JavaScript
1

I want to dynamically changed when the type is switched but I can’t use conditional statement like if-else or switch -case .
This is the code I have written

<html>
<head>
    <title>Product add</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="PrAd">
        <h2>
            <b>Product Add</b>
            <button class="button">Save</button>
        </h2>
        <hr>
    </div>
    <div class="form">
        <form>
            <label for="SKU">SKU</label>
            <input type="text" id="formbox" name="SKU"><br>
            <label for="Name ">Name</label>
            <input type="text" id="formbox" name="Name"><br>
            <label for="Price">Price</label>
            <input type="number" id="formbox" name="Price"><br>
            <label>Type Switcher</label>
            <select id="type" name="product" onChange="prodType(this.value);">
                <option value="">Choose Switcher</option>
                <option value="Acme Disc">Acme Disc</option>
                <option value="War and Peace">War and Peace</option>
                <option value="Chair">Chair</option>
            </select>
            
            <div class="fieldbox" id="acme_disc_attributes">
              <label>Size</label>
              <input type="text" name="size" value="">
            </div>
            
            <div class="fieldbox" id="war_peace_attributes">
              <label>Weight</label>
              <input type="text" name="weight" value="">
            </div>
            
            <div class="fieldbox" id="chair_attributes">
              <label>Length</label>
              <input type="text" name="length"><br>
             <label>Width</label>
            <input type="text" name="width"><br>
            </div>
        </form>
    </div>
``` `type or paste code here` ``` Is it possible to do this without conditional statement?
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
3

In order to change the HTML as a response to a form value, you’ll want to use event listeners. Or a frontend library.

1 Like
4

My attempt: https://codepen.io/jenovs/pen/bGYqPLN
Instead of if...else or switch I used an object lookup (which someone may consider cheating if this is an assignment and some specific solution is expected :slight_smile: ).

Hopefully mods won’t delete my post :smirk:

1 Like
5

Thank you, will definitely read more on it

6

Thank you , still learning how to use the forum

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.