+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Hide Form Group Until Select Item (/showthread.php?tid=65380)
Hide Form Group Until Select Item - wolfgang1983 - 06-06-2016
On my Ci view I have a drop down list for mysqli and pdo
PHP Code:
<div class="form-group">
<label class="col-lg-3">Database Driver</label>
<div class="col-lg-9">
<select name="database_driver" class="form-control">
<option value="">Select a Type</option>
<option value="mysqli">mysqli</option>
<option value="pdo" id="database_driver_pdo">pdo</option>
</select>
<?php echo form_error('database_driver', '<br/><div class="text-danger">', '</div>'); ?>
</div>
</div>
A few lines down that view I have another form group that has my database port input
PHP Code:
<div class="form-group" id="database_port">
<label class="col-lg-3">Database Port</label>
<div class="col-lg-9">
<input type="text" name="database_port" class="form-control" placeholder="Database Port: Leave this blank if not required" />
</div>
</div>
I would like to know how to hide the div below until I click on the pdo option on my select form and if I select mysqli it will hide it etc
RE: Hide Form Group Until Select Item - arma7x - 06-06-2016
You can learn AngularJS for dynamic webapps.
RE: Hide Form Group Until Select Item - InsiteFX - 06-06-2016
Hide / Show Div
RE: Hide Form Group Until Select Item - skunkbad - 06-06-2016
If you would use jQuery it would be as simple as this:
Code:
$('[name="database_driver"]').change(function(){
if($(this)val() == 'pdo'){
$('#database_port').show();
}else{
$('#database_port').hide();
}
});Of course, you would need to start with #database_port hidden, so just use CSS for that.