How to throw unwanted data from form? – Blancer.com Tutorials and projects

I am making a site to add product to a database.
The site has a type switcher for multiple types of the product.
by changing the type the input fields are changed by using display attribute CSS.
so there is a problem where the invisible inputs are still in the form and they are also submitted with the form. Also i wanted to validate the data but it have the same problem how do i validate the data shown to the user?.
i tried to change the whole by js document.create methods so i can create the inputs and labels i want but it was really complex . is there anyway i can fix this problem?

Here is the code im using:

            function TypeListener() {
              var x = document.getElementById("productType").value;
                document.getElementById("Hidden_Div1").style.display = x == 1 ? 'block' : 'none';
                document.getElementById("Hidden_Div2").style.display = x == 2 ? 'block' : 'none';
                document.getElementById("Hidden_Div3").style.display = x == 3 ? 'block' : 'none';
            }

.Type {
display: none;
}

<form id="product_form" action="<?=$_SERVER['PHP_SELF'] ?>" method="post">
<label for="Type Switcher">Type Switcher</label><select name="typeSwitcher" id="productType" onchange="TypeListener()">
                                                    <option value="" disabled selected>Type Switcher</option>
                                                    <option value="1" id="DVD">DVD</option>
                                                    <option value="2" id="Furniture">Furniture</option>
                                                    <option value="3" id="Book">Book</option>
                                                </select><br><br>
        <div id="Hidden_Div1" class="Type">
            <label for="Size">Size (MB)</label><input type="number" name="size" id="size" min="0"><br>
            <h5>Please, provide size in MB.</h5><br>
        </div>
        <div id="Hidden_Div2" class="Type">
            <label for="Height">Height (CM)</label><input type="number" name="height" id="height" min="0"><br>
            <label for="Width">Width (CM)</label><input type="number" name="width" id="width" min="0"><br>
            <label for="Length">Length (CM)</label><input type="number" name="length" id="length" min="0"><br>
            <h5>Please, provide dimensions in CM.</h5><br>
        </div>
        <div id="Hidden_Div3" class="Type"> 
            <label for="Weight">Weight (KG)</label><input type="number" name="weight" id="weight" min="0"><br>
            <h5>Please, provide weight in KG.</h5><br>
        </div>
</form>