I’m trying to learn PHP to solve an Assesment challenge, where I have to build a Product List & Add Product pages. Reading here and there, watching some tutorials I was able to develop this code so far:
Index.php:
<?php include("db.php"); ?> <?php include("includes/header.php"); ?> <div class="container p-4"> <div class="row"> <div class="col-md-4"> <div class="card card-body"> <!--INPUT FORM it will contains the form to add new product to the database: Fields: SKU / NAME / PRICE / PROD_TYPE / DVD / BOOK / FUR_H / FUR_W / FUR_L --> <form action="index.php" method="POST"> <div class="form-group"> <input type="text" name="sku" class="form-control" placeholder="Enter SKU Code"> <hr/> <input type="text" name="name" class="form-control" placeholder="Enter Product Name"> <hr/> <input type="text" name="price" class="form-control" placeholder="Enter Price"> <hr/> <label>Product Type</label> <select id="prod_type" name="prod_type" class="form-control" > <option value="">Select Product Type</option> <option value="DVD">DVD</option> <option value="BOOK">BOOK</option> <option value="FUR">FURNITURE</option> </select> <!-- <hr/> --> <!--if the select(prod_type) option = DVD, then show the following fields: Fields: DVD_SIZE if the select(prod_type) option = BOOK, then show the following fields: Fields: BOOK_WEIGHT if the select(prod_type) option = FUR, then show the following fields: Fields: FUR_H / FUR_W / FUR_L --> <hr/> <?php if(isset($_POST['prod_type']) && $_POST['prod_type'] == 'DVD'){ ?> <input type="text" name="dvd_size" class="form-control" placeholder="Enter DVD Size"> <?php } else if(isset($_POST['prod_type']) && $_POST['prod_type'] == 'BOOK'){ ?> <input type="text" name="book_weight" class="form-control" placeholder="Enter Book Weight"> <?php } else if(isset($_POST['prod_type']) && $_POST['prod_type'] == 'FUR'){ ?> <hr/> <input type="text" name="fur_h" class="form-control" placeholder="Enter Furniture Height"> <hr/> <input type="text" name="fur_w" class="form-control" placeholder="Enter Furniture Width"> <hr/> <input type="text" name="fur_l" class="form-control" placeholder="Enter Furniture Length"> <?php } ?> <!-- <hr/> --> </div> <hr/> <input type="submit" name="add_product" class="btn btn-success w-100" value="Add Product"> </form> </div> </div> <div class="col-md-8"> </div> </div> </div> <?php include("includes/footer.php"); ?>
Thing is, inputs for DVD Size, BOOK Weight and Forniture dimensions ( H, W & L ) should be render depending User selection on #prod_type. Currently those inputs show up after the User choose a select option, and hit Add Product button ( related to POST method I pressume, is the closest that i get )
Advertisement
Answer
PHP runs entirely on the server. If you want things to happen in the browser when your user interacts with your webpage (without performing a round-trip to the server), Javascript is your friend.
In this case, I would give each input a data
attribute to say which product type they are relevant for. Then you can write a Javascript function to handle changes to the prod_type
field and show/hide the correct fields.
For example:
function toggleFields() { var productType = document.getElementById('prod_type').value; var fields = document.querySelectorAll('[data-if-prod-type]'); fields.forEach(function (field) { if (field.dataset.ifProdType === productType) { field.style.display = ''; } else { field.style.display = 'none'; } }); } document.addEventListener('DOMContentLoaded', function() { document.getElementById('prod_type').addEventListener('change', toggleFields); // Run the toggle function when the DOM is ready loading, // so that fields that are not relevant to #prod_type's // initial value are hidden. toggleFields(); });
<select id="prod_type" name="prod_type" class="form-control"> <option value="">Select Product Type</option> <option value="DVD">DVD</option> <option value="BOOK">BOOK</option> <option value="FUR">FURNITURE</option> </select> <input type="text" name="dvd_size" class="form-control" placeholder="Enter DVD Size" data-if-prod-type="DVD"> <input type="text" name="book_weight" class="form-control" placeholder="Enter Book Weight" data-if-prod-type="BOOK"> <div data-if-prod-type="FUR"> <hr/> <input type="text" name="fur_h" class="form-control" placeholder="Enter Furniture Height"> <hr/> <input type="text" name="fur_w" class="form-control" placeholder="Enter Furniture Width"> <hr/> <input type="text" name="fur_l" class="form-control" placeholder="Enter Furniture Length"> </div>