I have 3 options. They are chair , war and peace, acme disc. switcher php. my question is with switcher. when I switch and form should be changed dynamically. I am beginner on php.
<!DOCTYPE html>
<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">
<option value="Acme Disc">Acme Disc</option>
<option value="War and Peace">War and Peace</option>
<option value="Chair">Chair</option>
</select>
</form>
</div>
<?php
?>
</body>
</html>
Advertisement
Answer
function prodType(prod){
var acmeAttributes = document.getElementById("acme_disc_attributes");
var warPeaceAttributes = document.getElementById("war_peace_attributes");
var chairAttributes = document.getElementById("chair_attributes");
acmeAttributes.style.display="none";
warPeaceAttributes.style.display="none";
chairAttributes.style.display="none";
if(prod=="Acme Disc"){
acmeAttributes.style.display="block";
}else if(prod=="War and Peace"){
warPeaceAttributes.style.display="block";
}else if(prod=="Chair"){
chairAttributes.style.display="block";
}
}.fieldbox{
display:none;
}<!DOCTYPE html>
<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>
</body>
</html>