This is the basic html page
<div class="col-lg-10">
<div class="form-group">
<select class="form-control" id="">
<option value="" hidden>Select Venue Type</option>
<option onclick="myFunction()">Theme Restaurant</option>
<option onclick="myFunction()">Blah restaurant</option>
<option onclick="myFunction()">Flana Restaurant</option>
<option onclick="myFunction()">Woops Restaurant</option>
</select>
</div>
<div class="form-group">
<div class="venue-type" id="restaurant-form">
<div class="row">
<div class="col-md-5" id="bsc-edit">
<div class="form-group">
<label for="city">Venue Name<sup class = "venue-imp">*</sup>
</label>
<input type="text" class="form-control" id="venue-name" placeholder="Jhanqar Banquet Hall" name="name">
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="form-group">
<label for="city">Venue Price<sup class = "venue-imp">*</sup>
</label>
<input type="text" class="form-control" id="venue-price" placeholder="Jhanqar Banquet Hall" name="price">
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
</div>
i want my dropdown list to show a form when clicked and i have tried using javascript function here, but it is not working the form is showing as it is and nothing is working with onclick. Help me to do it as the form is not being shown when clicked but it is shown directly
this is the javascript code;
<script>
function myFunction() {
var x = document.getElementById("restaurant-form");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Yes as per #gurvder372 you can't use onclick for option.You can also use an inline event assignment for this Like:
<select class="form-control" id="" onchange="javascript:return myFunction(event);">
<option value="" hidden>Select Venue Type</option>
<option>Theme Restaurant</option>
<option>Blah restaurant</option>
<option>Flana Restaurant</option>
<option>Woops Restaurant</option>
</select>
<script>
function myFunction(event)
{
var index_opt = event.target.selectedIndex;
if ( index_opt > 0 )
{
var x = document.getElementById("restaurant-form");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
</script>
onclick is not supported on option tag, You need to add event listener to the select instead
document.querySelector( "select[id]" ).addEventListener( "change", myFunction );
In the myFunction method you can show/hide form based on which option is selected.
function myFunction(event)
{
var selection = event.target.selectedIndex;
var x = document.getElementById("restaurant-form");
x.style.display = selection >= 1 ? "block" : "none";
}
Demo
function myFunction(event)
{
var selection = event.target.selectedIndex;
var x = document.getElementById("restaurant-form");
x.style.display = selection >= 1 ? "block" : "none";
}
document.querySelector( "select[id]" ).addEventListener( "change", myFunction );
<div class="col-lg-10">
<div class="form-group">
<select class="form-control" id="" >
<option value="">Select Venue Type</option>
<option>Theme Restaurant</option>
<option>Blah restaurant</option>
<option>Flana Restaurant</option>
<option>Woops Restaurant</option>
</select>
</div>
<div class="form-group">
<div class="venue-type" id="restaurant-form">
<div class="row">
<div class="col-md-5" id="bsc-edit">
<div class="form-group">
<label for="city">Venue Name<sup class = "venue-imp">*</sup>
</label>
<input type="text" class="form-control" id="venue-name" placeholder="Jhanqar Banquet Hall" name="name">
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="form-group">
<label for="city">Venue Price<sup class = "venue-imp">*</sup>
</label>
<input type="text" class="form-control" id="venue-price" placeholder="Jhanqar Banquet Hall" name="price">
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
</div>
Related
I have the following form, in summary:
kingdom --> phylum --> class --> order --> family --> genus...
If the kingdom = Animalia then the phylum options should be a certain list.
Following on, if the phylum then = Chordata the next drop down input option should be a certain list.
To continue, if the class = Mammalia the next drop down input option should be a certain list... etc.
So a hierarchical form with many dependant levels.
I've looked and tried a few examples, but I can't find a way to do this. Any ideas/suggestions?
Here's the bootstrap html:
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>kingdom</label>
<!-- <input type='text' class='form-control' name='kingdom' value ='Animalia' placeholder='Animalia' > -->
<select class="form-control" name='kingdom'>
<option>Animalia</option>
<option>Plantae</option>
<option>Fungi</option>
<option>Protista</option>
<option>Monera</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>phylum/division</label>
<!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
<select class="form-control" name='phylum'>
<option>Chordata</option>
<option>Annelid</option>
<option>Arthropod</option>
<option>Bryozoa</option>
<option>Cnidaria</option>
<option>Echinoderm</option>
<option>Mollusc</option>
<option>Nematode</option>
<option>Platyhelminthes</option>
<option>Rotifer</option>
<option>Sponge</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>class</label>
<!-- <input type='text' class='form-control' name='class' value ='Mammalia' placeholder='Mammalia' > -->
<select class="form-control" name='class'>
<option>Mammalia</option>
<option>Aves</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>order</label>
<!-- <input type='text' class='form-control' name='order' value ='Artiodactyla' placeholder='Artiodactyla' > -->
<select class="form-control" name='order'>
<option>Artiodactyla</option>
<option>Aegotheliformes</option>
<option>Perissodactyla</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>family</label>
<!-- <input type='text' class='form-control' name='family' value ='Bovidae' placeholder=' Bovidae' > -->
<select class="form-control" name='family'>
<option>Bovidae</option>
<option>Aegothelidae</option>
<option>Equidae</option>
<option>Delphinidae</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>genus</label>
<input type='text' class='form-control' name='genus' value ='Capra' placeholder='Capra' >
<select class="form-control" name='genus'>
<option>Capra</option>
<option>Ovis</option>
<option>Aegotheles</option>
<option>Oreamnos</option>
<option>Equus</option>
<option>Orcinus</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>subgenus</label>
<input type='text' class='form-control' name='subgenus' value ='Capra (aegagrus) hircus' placeholder='Capra (aegagrus) hircus' >
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>elementName</label>
<!-- <input type='text' class='form-control' name='elementName' value ='a' placeholder='' > -->
<select class="form-control" name='elementName'>
<option>Cranium</option>
<option>Mandible</option>
<option>Teeth</option>
<option>Rib</option>
<option>Humerus</option>
<option>Ulna</option>
<option>Radius</option>
<option>Carpal</option>
<option>Metacarpal</option>
<option>Femur</option>
<option>Patela</option>
<option>Fibula</option>
<option>Tarsal</option>
<option>Metatarsal</option>
<option>Scapula</option>
<option>Vertebrae</option>
<option>Middle Phalanx</option>
<option>Phalanx</option>
<option>Tibia</option>
<option>Astragalus</option>
<option>Calcaneus</option>
<option>Proximal Phalanx</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
maybe little bit lazy, but it works
if you thought similar
<div class="form-group" >
<select class="form-control" id="sel0">
<option value="0">Choose</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
</select>
<br>
<select class="form-control dispnone" id="sel1_1">
<option value="0">Choose</option>
<option value="1">A4</option>
<option value="2">RS8</option>
</select>
<select class="form-control dispnone" id="sel1_2">
<option value="0">Choose</option>
<option value="1">E36</option>
<option value="2">X5</option>
</select>
<select class="form-control dispnone" id="sel2_1">
<option value="0">Choose</option>
<option value="1">120LE</option>
<option value="2">140LE</option>
</select>
<select class="form-control dispnone" id="sel2_2">
<option value="0">Choose</option>
<option value="1">cyl8</option>
<option value="2">cyl16</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
var select_nums = 3;
$("#sel0").change(function() {
var ch = $("#sel0").val();
if(ch==0){
for (var i = 1; i < select_nums; i++) {
$('#sel1_'+i).css({'display':'none'});
}
$('#sel1_'+ch).css({'display':'block'});
}else if(ch==1){
for (var i = 1; i < select_nums; i++) {
$('#sel1_'+i).css({'display':'none'});
}
$('#sel1_'+ch).css({'display':'block'});
}else if(ch==2){
for (var i = 1; i < select_nums; i++) {
$('#sel1_'+i).css({'display':'none'});
}
$('#sel1_'+ch).css({'display':'block'});
}
});
$("#sel1_1").change(function() {
var ch = $("#sel1_1").val();
if(ch==0){
for (var i = 1; i < select_nums; i++) {
$('#sel2_'+i).css({'display':'none'});
}
$('#sel2_'+ch).css({'display':'block'});
}else if(ch==1){
for (var i = 1; i < select_nums; i++) {
$('#sel2_'+i).css({'display':'none'});
}
$('#sel2_'+ch).css({'display':'block'});
}else if(ch==2){
for (var i = 1; i < select_nums; i++) {
$('#sel2_'+i).css({'display':'none'});
}
$('#sel2_'+ch).css({'display':'block'});
}
});
});
</script>
I extracted a portion of your html and got it working using an event listener to hide the unwanted options. I hope it helps:
I only considered the first two categories to show the example 'Animalia' and 'Plantae' and considered two subsets of options for each. The change event on the select tag triggers the code to hide and show as required.
function hideSubset(selectedValue){
let secondChoice = document.querySelector('#secondChoice');
let firstChoice = document.querySelector('#firstChoice');
if (selectedValue === 'Animalia'){
secondChoice.style.display = 'none';
firstChoice.style.display = 'block';
} else {
firstChoice.style.display = 'none';
secondChoice.style.display = 'block';
}
}
let mainChoice = document.querySelector('#mainChoice');
mainChoice.addEventListener('change', function(){
hideSubset(mainChoice.value);
}, false);
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>kingdom</label>
<!-- <input type='text' class='form-control' name='kingdom' value ='Animalia' placeholder='Animalia' > -->
<select class="form-control" name='kingdom' id="mainChoice">
<option>Choose one</option>
<option>Animalia</option>
<option>Plantae</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left' id="firstChoice">
<div class='form-group'>
<label for='uname'>Options for Animalia</label>
<!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
<select class="form-control" name='phylum'>
<option>Chordata</option>
<option>Annelid</option>
<option>Arthropod</option>
<option>Bryozoa</option>
<option>Cnidaria</option>
<option>Echinoderm</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left' id="secondChoice">
<div class='form-group'>
<label for='uname'>Options for Plantae</label>
<!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
<select class="form-control" name='phylum'>
<option>Mollusc</option>
<option>Nematode</option>
<option>Platyhelminthes</option>
<option>Rotifer</option>
<option>Sponge</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
It shows like this on my side. I use bootstrap 4
Looks like this when loading
When choosing Animalia
When choosing Plantae
In browser, the HTML is generated dynamically and is rendered as
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status0" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div><div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status1" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
The code is
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName =$this.find("input[type=text]:first-child").val();
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
I am trying to fetch values of contact numbers i.e with id's relationship-type-contact(n) values in the line "
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();"
This is fetching values of first-child textboxes in the variable relationshipContactNumber in the loop.
Please help !!!
This should work, use the .first() and .last() selectors.
Another way, if you have access to alter the HTML, is to add class names for the input fields and select them by using that instead.
function getData() {
var relationship_details_array = [];
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName = $this.find("input[type=text]").first().val();
var relationshipContactNumber = $this.find("input[type=text]").last().val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
console.log(relationship_details_array);
}
$("#getData").on("click", getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getData">Show data in console log</button>
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control">
<option value="">Select Relationship</option>
<option value="Father">Father</option>
<option value="Mother" selected>Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" value="Mommy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" value="1234" placeholder="Contact Number">
</div>
</div>
<div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control">
<option value="">Select Relationship</option>
<option value="Father" selected>Father</option>
<option value="Mother">Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" value="Daddy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" value="5678" placeholder="Contact Number">
</div>
</div>
</div>
I'm trying to make option value with others , which if the user need to write other values input text will being shows to him to add what he want , otherwise he can add from the option select box , I have an issue with that which it add only the input field and not adding the value from the optin box , Can any one help me with that the project is with laravel framework
here's my form :
<div class="row">
<div class="col-md-12 unit">
<label class="label float-ar">من فضلك اختر هوايات الطفل</label>
<div class="select " id="admDivChecktop">
<select name="childHoppy" class="col-md-12 sel-has-p" id="getFname" onchange="admSelectCheck(this);">
<option value="none" selected disabled>اختر هوايات الطفل</option>
<option value="القرأه">القراه</option>
<option value="الرياضة">الرياضة </option>
<option value="السباحه">السباحه</option>
<option value="الرسم">الرسم </option>
<option id="admOption" value="0">others</option>
</select>
</div>
</div>
</div>
<div class="row" id="admDivCheck" style="display:none;">
<div class="col-md-12 unit" >
<label class="label">أَضف بيانات أخري لهواية طفلك</label>
<div class="input" >
<input type="text" class="col-md-12 bg-hover" name="childHoppy" >
<label class="icon-left" >
<i class="fa fa-user"></i>
</label>
</div>
</div>
</div>
<script>
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = document.getElementById("getFname").value;
alert(admOptionValue);
if(admOptionValue == 0){
document.getElementById("admDivCheck").style.display = "";
document.getElementById("admDivChecktop").style.display = "none";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>
I would add another hidden input and store the value there.
If your select has changed, catch the change with javascript and update hidden's value. Same for the text input.
What do you think about this?
Pseudo code:
<input type="hidden" name="childHoppy" id="childHoppy">
<select name="select" id="select">
<option>...</option>
</select>
<input type="text" name="text" id="text">
<script>
$document.on('change', '#select, #text', function() {
$('#childHoppy').val($this.val());
});
</script>
I have a table that lists all of the users invoices, and each invoice contains a pay button to allow them to pay the bill.
I currently have a loop that goes through each invoice and displays each invoice in its own row, and when a user goes to click on the pay button the JavaScript will show a selection box to use a saved card or a new card, if the user chooses a saved card then the JavaScript will show the other select box containing their saved cards, if the new card is chosen then the other input fields will be displayed, right now the showing and hiding part when selecting a saved card or new card ONLY works for the very first row in the table, no other rows work with that JavaScript, I'm sure its because JavaScript is grabbing that first id and stopping there. How can I do this correctly to where it grabs all of the ids and runs the code when the user chooses a saved card or new card on each invoice?
I created a JSFiddle to show my exact situation, can someone modify it to where it will work? I would really appreciate it!
https://jsfiddle.net/s0fbrcw6/1/
payments.blade.php
#if($payments)
#foreach($payments as $payment)
<tr>
<td>${{number_format(($payment->price /100), 2, '.', ' ')}}</td>
<td>{{$payment->product_name}}</td>
<td>{{$payment->created_at->toFormattedDateString()}}</td>
<td>{{$payment->created_at->addMonth()->toFormattedDateString()}}</td>
<td>{{$payment->reoccurring}}</td>
<td>{{$payment->status}}</td>
#if($payment->status == "Paid")
#else
<td>
<div class="add-payment-container">
<button class="toggle-add-payment mdl-button mdl-js-button mdl-js-ripple-effect pull-right btn-info">
#if($payment->reoccurring == "Yes")
Subscribe
#else
Pay Here
#endif
</button>
<div class="add-payment">
</br>
<form action="{{'/users/payment'}}" method="post"
id="checkout-form">
<input type="text" name="price" class="hidden"
value="{{$payment->price}}">
<input type="text" name="productName" class="hidden"
value="{{$payment->product_name}}">
<input type="text" name="paymentID" class="hidden"
value="{{$payment->id}}">
<input type="text" name="reoccurring" class="hidden"
value="{{$payment->reoccurring}}">
<div class="row">
<div class="col-sm-4">
<div id="paymentMethodDiv"
class="form-group label-floating">
{!! Form::label('paymentMethod', 'Payment Method') !!}
</br>
{!! Form::select('paymentMethod', ['Saved Card'=>'Saved Card','New Card'=>'New Card'], null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'paymentMethod'])!!}
</div>
</div>
<div class="col-sm-4">
<div id="savedCardsDiv" class="form-group label-floating" style="display: none;">
{!! Form::label('card', 'Previous Cards') !!}
</br>
{!! Form::select('card', $cardLast4, null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'savedCards'])!!}
</div>
</div>
<div class="col-md-4">
<div id="cardHolderNameDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Card Holder
Name</label>
<input type="text" id="card-name"
class="form-control">
</div>
</div>
<div class="col-md-4">
<div id="cardNumberDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Card Number</label>
<input type="text" id="card-number"
class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div id="expirationMonthDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Expiration
Month</label>
<input type="text" id="card-expiry-month"
class="form-control">
</div>
</div>
<div class="col-md-5">
<div id="expirationYearDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Expiration Year</label>
<input type="text" id="card-expiry-year"
class="form-control">
</div>
</div>
<div class="col-md-2">
<div id="cvcDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">CVC</label>
<input type="text" id="card-cvc"
class="form-control">
</div>
</div>
</div>
{{csrf_field()}}
<button type="submit" class="btn btn-primary pull-right">Make
Payment
</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</td>
#endif
</tr>
<script>
var paymentMethodSelect = document.getElementById('paymentMethod');
paymentMethodSelect.onchange = function () {
if (paymentMethodSelect.value == 'Saved Card') {
document.getElementById("savedCardsDiv").style.display = "block";
document.getElementById("cardHolderNameDiv").style.display = "none";
document.getElementById("cardNumberDiv").style.display = "none";
document.getElementById("expirationMonthDiv").style.display = "none";
document.getElementById("expirationYearDiv").style.display = "none";
document.getElementById("cvcDiv").style.display = "none";
} else if (paymentMethodSelect.value == 'New Card') {
document.getElementById("savedCardsDiv").style.display = "none";
document.getElementById("cardHolderNameDiv").style.display = "block";
document.getElementById("cardNumberDiv").style.display = "block";
document.getElementById("expirationMonthDiv").style.display = "block";
document.getElementById("expirationYearDiv").style.display = "block";
document.getElementById("cvcDiv").style.display = "block";
} else {
document.getElementById("savedCardsDiv").style.display = "none";
document.getElementById("cardHolderNameDiv").style.display = "none";
document.getElementById("cardNumberDiv").style.display = "none";
document.getElementById("expirationMonthDiv").style.display = "none";
document.getElementById("expirationYearDiv").style.display = "none";
document.getElementById("cvcDiv").style.display = "none";
}
};
</script>
Advice: use jQuery. For situations like this, it significantly simplifies the js function part of it.
jsFiddle Solution: https://jsfiddle.net/brednmuc/4/
Brief Description:
Move away from using HTML IDs for everything and just make attributes that make the most sense for your web application. This methodology allows you to practically define an unlimited number of attributes that you can key certain behaviors off of. This also prevents conflicts with libraries that you may use / integrate with your project.
Code:
jQuery:
$(document).ready(function() {
$("select[name='paymentMethod']").change(function() {
var dropdownValue = $(this).val();
var transactionId = $(this).parent().attr('transactionId');
switch (dropdownValue) {
case 'Saved Card':
$("td[transactionId='" + transactionId + "'] div.savedCardsDiv").show();
break;
case 'New Card':
$("td[transactionId='" + transactionId + "'] div.savedCardsDiv").hide();
break;
default:
$("td[transactionId='" + transactionId + "'] div.savedCardsDiv").hide();
break;
};
});
});
HTML:
<table>
<tr>
<td transactionId="1">
<select name="paymentMethod" form="carform" class="paymentMethod">
<option value="">Select your option</option>
<option value="Saved Card">Saved Card</option>
<option value="New Card">New Card</option>
</select>
<div class="savedCardsDiv" style="display: none;">
<select name="savedCards" form="carform" class="savedCards">
<option value="">Select your option</option>
<option value="Saved Card">****4242</option>
<option value="New Card">****5423</option>
</select>
</div>
</td>
</tr>
<tr>
<td transactionId="2">
<select name="paymentMethod" form="carform" class="paymentMethod">
<option value="">Select your option</option>
<option value="Saved Card">Saved Card</option>
<option value="New Card">New Card</option>
</select>
<div class="savedCardsDiv" style="display: none;">
<select name="savedCards" form="carform" class="savedCards">
<option value="">Select your option</option>
<option value="Saved Card">****4242</option>
<option value="New Card">****5423</option>
</select>
</div>
</td>
</tr>
</table>
I have this code:
<div class="form-group">
<label for="slDisThrough" class="col-sm-1 control-label">Distributed Through</label>
<div class="col-sm-11">
<select name="slDisThrough" id="slDisThrough" class="form-control">
<option value="0">-Select-</option>
<option value="1">Agent</option>
<option value="2">Retail</option>
</select>
</div>
</div>
<div id="slAgentID" class="hide">
<div class="form-group">
<label for="slAgent" class="col-sm-1 control-label">Agent</label>
<div class="col-sm-11">
<select name="slAgent" class="form-control">
<option value="0">-Select-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
</div>
</div>
</div>
<div id="slRetailID" class="hide">
<div class="form-group">
<label for="slRetail" class="col-sm-1 control-label">Retail</label>
<div class="col-sm-11">
<select name="slRetail" class="form-control">
<option value="0">-Select-</option>
<option value="1">Hide</option>
<option value="2">Show</option>
</select>
</div>
</div>
</div>
Check this Fiddle
if(document.getElementById("slDisThrough").selectedIndex == 1) {
document.getElementById("slAgentID").style.display = ""; }
else { document.getElementById("slAgentID").style.display = "none"; }
if(document.getElementById("slDisThrough").selectedIndex == 2) {
document.getElementById("slRetail").style.display = ""; }
else { document.getElementById("slRetail").style.display = "none"; }
I need to Show/Hide the DIVs on Selected Value, I was previously using it with JavaScript, but stuck with Bootstrap.
Since you load jQuery, better use it like this:
$('#slDisThrough').on('change', function(){
if ($(this).val() == 1 ) {
$('#slAgentID').removeClass('hide');
$('#slRetailID').addClass('hide');
}
if ($(this).val() == 2 ) {
$('#slAgentID').addClass('hide');
$('#slRetailID').removeClass('hide');
}
})
Jsfiddle here