Make a dynamic hide and show fields using select option(Codeigniter) - php

Question

I am currently developing a system. I have module called "Request Certificate", in this module; User will choose among the 4 certificates given(certificate 1 and so on), then there will be fields need to fill up before submitting it. But there's a plot twist, fields will be different based on the certificate chosen.
Example: I choice certificate 1, the fields will be shown are: name, age. If I choice certificate 2, the fields will be shown are: name, age and year etc.
In my admin side, there will be a "Requesting for Certificate" in my side bar. In here, the admin can view all the users requested for the certificate then print it(used window.print to print)
NOTE: I used dropdown to display the 4 certificates. Right now, I've done the 1st and 2nd certificate but when I choice the 3rd and 4th certificate, the fields didn't show.
Question: How to create a dynamic hide and show fields depends on the dropdown selected?
View
<select class="form-control" id="certificate" name="certificate">
<option value="CertificateOne">Certificate 1</option>
<option value="CertificateTwo">Certificate 2</option>
</select>
<div class="cert_select" id="CertificateTwo">
<div class="col-xs-12">
<div class="form-group">
<hr>
<h4> Certificate</h4>
<div class="col-xs-3">
<label>First Name</label>
<input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
<div class="text-danger" id="fname_error"></div>
</div>
<div class="col-xs-3">
<label>Middle Name</label>
<input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
<div class="text-danger" id="mname_error"></div>
</div>
<div class="col-xs-3">
<label>Last Name</label>
<input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
<div class="text-danger" id="lname_error"></div>
</div>
</div>
Script
$(document).ready(function(){
$('.cert_select').hide();
$('#certificate').change(function(){
$('.cert_select').hide();
$('#' + $(this).val()).show();
});
});
I also tried this
View
<select class="form-control" id="certificate" name="certificate">
<?php foreach($certificates as $row):?>
<option value="<?= $row->name?>"><?= $row->name?></option>
</select>
<div class="cert_select" id="<?= $row->name?>">
<div class="col-xs-12">
<div class="form-group">
<hr>
<h4> Certificate</h4>
<div class="col-xs-3">
<label>First Name</label>
<input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
<div class="text-danger" id="fname_error"></div>
</div>
<div class="col-xs-3">
<label>Middle Name</label>
<input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
<div class="text-danger" id="mname_error"></div>
</div>
<div class="col-xs-3">
<label>Last Name</label>
<input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
<div class="text-danger" id="lname_error"></div>
</div>
</div>
<?php endforeach;?>
It only displayed the first certificate and the fields didn't show

Answer 1

You have forgotten 2 div closures, one for .cert_select and the other for .col-xs-12.
<select class="form-control" id="certificate" name="certificate">
<option value="CertificateOne">Certificate 1</option>
<option value="CertificateTwo">Certificate 2</option>
<option value="CertificateThree">Certificate 3</option>
<option value="CertificateFour">Certificate 4</option>
</select>
<div class="cert_select" id="CertificateOne">
<div class="col-xs-12">
<div class="form-group">
<hr>
<h4> Certificate 1</h4>
<div class="col-xs-3">
<label>First Name</label>
<input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
<div class="text-danger" id="fname_error"></div>
</div>
<div class="col-xs-3">
<label>Middle Name</label>
<input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
<div class="text-danger" id="mname_error"></div>
</div>
<div class="col-xs-3">
<label>Last Name</label>
<input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
<div class="text-danger" id="lname_error"></div>
</div>
</div>
</div>
</div>
<div class="cert_select" id="CertificateTwo">
<div class="col-xs-12">
<div class="form-group">
<hr>
<h4> Certificate 2</h4>
<div class="col-xs-3">
<label>First Name</label>
<input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
<div class="text-danger" id="fname_error"></div>
</div>
<div class="col-xs-3">
<label>Middle Name</label>
<input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
<div class="text-danger" id="mname_error"></div>
</div>
<div class="col-xs-3">
<label>Last Name</label>
<input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
<div class="text-danger" id="lname_error"></div>
</div>
</div>
</div>
</div>
<div class="cert_select" id="CertificateThree">
<div class="col-xs-12">
<div class="form-group">
<hr>
<h4> Certificate 3</h4>
<div class="col-xs-3">
<label>First Name</label>
<input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
<div class="text-danger" id="fname_error"></div>
</div>
<div class="col-xs-3">
<label>Middle Name</label>
<input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
<div class="text-danger" id="mname_error"></div>
</div>
<div class="col-xs-3">
<label>Last Name</label>
<input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
<div class="text-danger" id="lname_error"></div>
</div>
</div>
</div>
</div>
<div class="cert_select" id="CertificateFour">
<div class="col-xs-12">
<div class="form-group">
<hr>
<h4> Certificate 4</h4>
<div class="col-xs-3">
<label>First Name</label>
<input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
<div class="text-danger" id="fname_error"></div>
</div>
<div class="col-xs-3">
<label>Middle Name</label>
<input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
<div class="text-danger" id="mname_error"></div>
</div>
<div class="col-xs-3">
<label>Last Name</label>
<input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
<div class="text-danger" id="lname_error"></div>
</div>
</div>
</div>
</div>
JS part with jQuery :
$(document).ready(function(){
$('.cert_select').hide();
$('#certificate').change(function(){
$('.cert_select').hide();
$('#' + $(this).val()).show();
});
});
Here is a jsfiddle with the 4 certificates:
https://jsfiddle.net/Lqq8ucep/