CssSY CssSY - 1 month ago 11
CSS Question

Load bootstrap forms from select page

I have a register form. I just need to load bootstrap form in same page behind the select menu when someone click something from select menu. Should I hide form until someone click that item in select menu right?

This is my code.

<div class="form-group">
<select class="form-control menu">
<option>Select category*</option>
<option>Apartment</option>
<option>Lands</option>
</select>
</div>


I need to load this form someone click Apartment in the menu.

<form>
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="Size(sqft)">
/div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="No of bedrooms">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="No of bathrooms">
</div>
</div>
</div>
</div>
</form>


I tried play with this code. But it redirect to another pages.

<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>


What method do I need to follow?

Answer

Have a look at this jsfiddle:

I gave your wrapper of your apartment an id <div class="col-md-12" id="apartment">.

So I added following jQuery to toggle your html of your apartment:

$('select.menu').change(function(){
  // this function runs when a user selects an option from a <select> element
  switch($(this).find("option:selected").prop('value')) {
    case '1': $('#apartment').show(); break;
    default: $('#apartment').hide(); break;
  }
});

And don't forget to hide your #apartment:

#apartment {
  display: none;
}