• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Hide Form Group Until Select Item

#1
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
There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!
Reply

#2
You can learn AngularJS for dynamic webapps.
Keep calm.
Reply

#3
Hide / Show Div
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply

#4
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.
Reply


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2021 MyBB Group.