I am trying to show html content based off a select value. When anything other than cables is selected I want to show Manufacturer and Model but when cables is selected I want to not show those two inputs. I want to so that I can select cables then when I select aps that it will bring those two fields back. What is the best/most proper method of doing this? Code snippet to show what I am getting. I removed a lot of the options for simplicity's sake.
var sel=document.getElementById("type");
var manufacturer=document.getElementById("manufacturer");
var model=document.getElementById("model");
var typeInputs=document.getElementById("typeInputs");
var aps = '<h1>aps</h1>';
var cables = '<h1>cables</h1>';
function typePicker(){
if(sel.value=="aps"){
typeInputs.innerHTML=aps;
}
if(sel.value=="cables"){
manufacturer.innerHTML= "";
model.innerHTML= "";
typeInputs.innerHTML=cables;
}
};
<div class="form-group" id="manufacturer">
<label for="manufacturer" class="control-label">Manufacturer</label>
<select class="form-control selectpicker" title="Manufacturer" name="manufacturer" data-live-search="true">
<option value="cisco">Cisco</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="model">
<label for="model" class="control-label">Model Name</label>
<input type="text" class="form-control" id="model" name="model" placeholder="Model Name">
</div>
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="other">Other</option>
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
</select>
</div>
<div class="form-group" id="typeInputs">
</div>
for hide:
_element.style.display = 'none';
for show:
_element.style.display = 'block';
var sel=document.getElementById("type");
var manufacturer=document.getElementById("manufacturer");
var model=document.getElementById("model");
var typeInputs=document.getElementById("typeInputs");
var aps = '<h1>aps</h1>';
var cables = '<h1>cables</h1>';
function typePicker(){
if(sel.value=="aps"){
typeInputs.innerHTML=aps;
}
if(sel.value=="cables"){
manufacturer.style.display = 'none';
model.style.display = 'none';
typeInputs.innerHTML=cables;
}else{
manufacturer.style.display = 'block';
model.style.display = 'block';
}
};
<div class="form-group" id="manufacturer">
<label for="manufacturer" class="control-label">Manufacturer</label>
<select class="form-control selectpicker" title="Manufacturer" name="manufacturer" data-live-search="true">
<option value="cisco">Cisco</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="model">
<label for="model" class="control-label">Model Name</label>
<input type="text" class="form-control" id="model" name="model" placeholder="Model Name">
</div>
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="other">Other</option>
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
</select>
</div>
<div class="form-group" id="typeInputs">
</div>
Related
I'm trying to create a form where I'm giving dynamic select option i.e one select option will depend on another select option, as you can see in the Image below, if Gender is male and Child the age group is between 1-18 similarly for Adult its greater than 18.
And By clicking Add member I'm cloning the whole Person div, but the script is not working for the cloned node and I'm only getting AgeGroup of the 1st div whose clone is created.
I'm trying to build this form in Django if that helps.
My code:
## html code
<button class="btn" id="addMember">Add Member</button>
<div class="form-group col-md-4">
<label>Optimise for:</label>
<div class="input-group mb-3">
<select class="custom-select" id="type" required>
<option value="" disabled="disabled" selected="selected">Choose option</option>
<option value="Child">Child</option>
<option value="Adult">Adult</option>
</select>
</div>
</div>
<div class="form-group">
<label>Gender: </label>
<div class="input-group mb-3">
<select name="h_gender" class="custom-select" id="gender" required>
<option value="" disabled="disabled" selected="selected">Choose option</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group col-md-4">
<label>Age Group:</label>
<div class="input-group mb-3">
<div id="selectList">
</div>
</div>
</div>
document.getElementById('addMember').onclick = function() {
var addOnDiv = document.getElementById('addon');
var clonedNode = addOnDiv.querySelector('.memberBody').cloneNode(true);
addOnDiv.appendChild( clonedNode );
}
## for select
$("select").change(function() {
var selectedVal = $('#type').val();
var selectedGender = $('#gender').val();
console.log(selectedGender);
console.log(selectedVal);
if('Child' === selectedVal){
var childGroup = '<select name="h_ageGroup" class="custom-select"> <option value="" disabled="disabled" selected="selected">Choose option</option>........</select>';
$('#selectList').html(childGroup);
}
if('Adult' === selectedVal ){
var childGroup = '<select name="h_ageGroup" class="custom-select"> <option value="" disabled="disabled" selected="selected">Choose option</option> <option value=">18 Years"> >18 Years </option></select>';
$('#selectList').html(childGroup);
}
});
How can I get dynamic select on my cloned node too. Is there any other way through which I can achieve this ?
As your html are dynamcially created you need to bind it to some static element i.e : any div , document ..etc . Then , in your code you have use same ids for mutliple elements instead use class selector and then get required values using $(this).closest('.memberBody') this will get closest div from select and then use .find to get required values
Demo Code :
document.getElementById('addMember').onclick = function() {
var addOnDiv = document.getElementById('addon');
var clonedNode = addOnDiv.querySelector('.memberBody').cloneNode(true);
$(clonedNode).find('.selectList').html('') //empty age group div
addOnDiv.appendChild(clonedNode);
}
//just specify select when this event should get called..
$(document).on('change', '.type , .gender', function() {
//use closest and find to get only value where slect has been change
var selectedVal = $(this).closest('.memberBody').find('.type').val();
var selectedGender = $(this).closest('.memberBody').find('.gender').val();
if ('Child' === selectedVal) {
var childGroup = '<select name="h_ageGroup" class="custom-select"> <option value="" disabled="disabled" selected="selected">Choose option</option>........</select>';
$(this).closest('.memberBody').find('.selectList').html(childGroup);
}
if ('Adult' === selectedVal) {
var childGroup = '<select name="h_ageGroup" class="custom-select"> <option value="" disabled="disabled" selected="selected">Choose option</option> <option value=">18 Years"> >18 Years </option></select>';
$(this).closest('.memberBody').find('.selectList').html(childGroup);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" id="addMember">Add Member</button>
<div id="addon">
<div class="memberBody">
<div class="form-group col-md-4">
<label>Optimise for:</label>
<div class="input-group mb-3">
<!--aded class-->
<select class="custom-select type" required>
<option value="" disabled="disabled" selected="selected">Choose option</option>
<option value="Child">Child</option>
<option value="Adult">Adult</option>
</select>
</div>
</div>
<div class="form-group">
<label>Gender: </label>
<div class="input-group mb-3">
<!--aded class-->
<select name="h_gender" class="custom-select gender" required>
<option value="" disabled="disabled" selected="selected">Choose option</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group col-md-4">
<label>Age Group:</label>
<div class="input-group mb-3">
<!--aded class-->
<div class="selectList">
</div>
</div>
</div>
</div>
</div>
I have a form dropdown list and my goal is to able a user to select "Other" and what I want to happen is to make a form row appear below so the user can type in the "Other" option text. Here is my code below, I'm not sure if Bootstrap naturally has a built in hide/show function. I am using latest version if that helps. Many thanks in advance!
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select type="dropdown" name="cemetery" class="form-control" id="mySelect">
<option value="select" selected="selected">Select Cemetery</option>
<option value="AK">Akatarawa</option>
<option value="TA">Taita</option>
<option value="WA">Wainuiomata</option>
<option value="WH">Whenua Tapu</option>
<option value="MA">Makara</option>
<option value="KA">Karori</option>
<option value="ST">St Johns</option>
<option value="AW">Awa Tapu</option>
<option value="PA">Paraparaumu</option>
<option value="other">Other</option>
</select>
</div>
</div>
The form row below I want to appear when above "other" option is selected and of course disappear when another dropdown option is selected.
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery">
</div>
</div>
We can make use of bootstrap util class "d-block" and "d-none" to show/hide the containers.
function handleSelect() {
var selected = document.getElementById("mySelect").value;
var details = document.getElementById("other-details");
if (selected === "other") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
Working demo
I have added both a JQuery option and a vanilla JS option. Both I also added an ID to the option tag with the value of "other". Simply added an id="other" attribute to that tag.
Using JQuery you can use .show() and .hide() to show/hide the input when the other option is selected.
var other = $("#other");
var otherInput = $(".otherInput");
otherInput.hide();
$('#mySelect').on('change', function() {
var value = $(this).val();
if(value === "other"){
otherInput.show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select type="dropdown" name="cemetery" class="form-control" id="mySelect">
<option value="select" selected="selected">Select Cemetery</option>
<option value=" AK">Akatarawa</option>
<option value="TA">Taita</option>
<option value="WA">Wainuiomata</option>
<option value="WH">Whenua Tapu</option>
<option value="MA">Makara</option>
<option value="KA">Karori</option>
<option value="ST">St Johns</option>
<option value="AW">Awa Tapu</option>
<option value="PA">Paraparaumu</option>
<option id="other" value="other">Other</option>
</select>
</div>
</div>
<div class="form-row otherInput">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery">
</div>
</div>
Vanilla JS:
First set your other input div to hidden using js .style. Then create a onload function and add an event listener for change. Run a conditional on the value and change the style if the conditional is true.
otherInput.style.display = "none";
window.onload = function () {
var selectBox = document.getElementById("mySelect");
selectBox.addEventListener('change', changeFunc);
function changeFunc() {
if(this.value === "other"){
otherInput.style.display = "block";
}else{
otherInput.style.display = "none";
}
}
}
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select type="dropdown" name="cemetery" class="form-control" id="mySelect">
<option value="select" selected="selected">Select Cemetery</option>
<option value=" AK">Akatarawa</option>
<option value="TA">Taita</option>
<option value="WA">Wainuiomata</option>
<option value="WH">Whenua Tapu</option>
<option value="MA">Makara</option>
<option value="KA">Karori</option>
<option value="ST">St Johns</option>
<option value="AW">Awa Tapu</option>
<option value="PA">Paraparaumu</option>
<option id="other" value="other">Other</option>
</select>
</div>
</div>
<div id="otherInput" class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery">
</div>
</div>
I am trying to show the "individual" form and hide the "parent" form when the "individual" radio is checked, and show the "parent" form and hide the "individual" form when the parent radio is checked. My JavaScript function doesn't seem to be working, any ideas with what's wrong with it?
HTML:
<!-- Radio check 1 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked>
Individual
</label>
</div>
<!-- Radio check 2 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()">
Parent of a child
</label>
</div>
<!-- Form for individual -->
<form id="individual">
<!-- Individual's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="First name">
</div>
<!-- Individual's last name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Last name">
</div>
<!-- Email box -->
<div class="form-group row">
<input class="form-control" type="email" placeholder="Email">
</div>
<!-- Password box -->
<div class="form-group row">
<input class="form-control" type="password" placeholder="Password">
</div>
<!-- Individual's birthday -->
<label>Birthday</label>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<!-- Create account button -->
<button></button>
</form>
<!--Form for child-->
<form id="parent" class="hidden">
<!-- Parent's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Parent's first name">
</div>
<!-- Parent's last name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Parent's last name">
</div>
<!-- Email box -->
<div class="form-group row">
<input class="form-control" type="email" placeholder="Email">
</div>
<!-- Password box -->
<div class="form-group row">
<input class="form-control" type="password" placeholder="Password">
</div>
<!-- Child's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Child's first name">
</div>
<!-- Child's birthday -->
<label>Child's Birthday</label>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<!-- Create account button -->
<button></button>
</form>
CSS:
#individual {
display: block;
}
#parent {
display: none;
}
JavaScript:
function radioCheck() {
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var individual = document.getElementById("individual");
var parent = document.getElementById("parent");
if (radio2.checked == true){
individual.style.display = "none";
parent.style.display = "block";
}
else {
individual.style.display = "block";
parent.style.display = "none";
}
}
Since one of your radio button is selected by default you have to call or invoke radioCheck() on page load. And also do not forget to close all of your input elements.
function radioCheck() {
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var individual = document.getElementById("individual");
var parent = document.getElementById("parent");
if (radio2.checked == true){
individual.style.display = "none";
parent.style.display = "block";
}
else {
individual.style.display = "block";
parent.style.display = "none";
}
}
radioCheck()
<!-- Radio check 1 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked/>
Individual
</label>
</div>
<!-- Radio check 2 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"/>
Parent of a child
</label>
</div>
<!-- Form for individual -->
<form id="individual">
<!-- Individual's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="First name"/>
</div>
<!-- Individual's last name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Last name"/>
</div>
<!-- Email box -->
<div class="form-group row">
<input class="form-control" type="email" placeholder="Email"/>
</div>
<!-- Password box -->
<div class="form-group row">
<input class="form-control" type="password" placeholder="Password"/>
</div>
<!-- Individual's birthday -->
<label>Birthday</label>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<!-- Create account button -->
<button></button>
</form>
<!--Form for child-->
<form id="parent" class="hidden">
<!-- Parent's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Parent's first name"/>
</div>
<!-- Parent's last name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Parent's last name"/>
</div>
<!-- Email box -->
<div class="form-group row">
<input class="form-control" type="email" placeholder="Email"/>
</div>
<!-- Password box -->
<div class="form-group row">
<input class="form-control" type="password" placeholder="Password"/>
</div>
<!-- Child's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Child's first name"/>
</div>
<!-- Child's birthday -->
<label>Child's Birthday</label>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<!-- Create account button -->
<button></button>
</form>
Yes I agree ,First you have to close all the input tags.
But the code in question is working fine for me without any changes:
<script>
function radioCheck() {
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var individual = document.getElementById("individual");
var parent = document.getElementById("parent");
if (radio2.checked == true){
individual.style.display = "none";
parent.style.display = "block";
}
else {
individual.style.display = "block";
parent.style.display = "none";
}
}
</script>
<!-- Radio check 1 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" />
Individual
</label>
</div>
<!-- Radio check 2 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"/>
Parent of a child
</label>
</div>
<!-- Form for individual -->
<form id="individual" style="display:none">
<!-- Individual's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="First name"/>
</div>
<!-- Individual's last name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Last name"/>
</div>
<!-- Email box -->
<div class="form-group row">
<input class="form-control" type="email" placeholder="Email"/>
</div>
<!-- Password box -->
<div class="form-group row">
<input class="form-control" type="password" placeholder="Password"/>
</div>
<!-- Individual's birthday -->
<label>Birthday</label>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<!-- Create account button -->
<button></button>
</form>
<!--Form for child-->
<form id="parent" class="hidden" style="display:none">
<!-- Parent's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Parent's first name"/>
</div>
<!-- Parent's last name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Parent's last name"/>
</div>
<!-- Email box -->
<div class="form-group row">
<input class="form-control" type="email" placeholder="Email"/>
</div>
<!-- Password box -->
<div class="form-group row">
<input class="form-control" type="password" placeholder="Password"/>
</div>
<!-- Child's first name box -->
<div class="form-group row">
<input class="form-control" type="text" placeholder="Child's first name"/>
</div>
<!-- Child's birthday -->
<label>Child's Birthday</label>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);"/>
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<!-- Create account button -->
<button></button>
</form>
I want to get option like PCMB and PCMC in select option when I selected SCIENCE as a previous select tag and nothing when I selected Commerce.
<div class="row Time">
<div class="col-md-4 col-sm-4">
<p>Course<span class="astric">*</span></p>
<select class="Academic">
<option value="">Select</option>
<option value="" id="Science">Science</option>
<option value="" id="Commerce">Commerce</option>
<option value="" id="Arts">Arts</option>
</select>
</div>
<div class="col-md-4 col-sm-4">
<p>Branch<span class="astric">*</span></p>
<select class="Academic">
<option value="" id="Select">Select</option>
<option value="" id="PCMB">PCMB</option>
<option value="" id="PCMC">PCMC</option>
<option value="" id="PCMS">PCMS</option>
</select>
</div>
<div class="col-md-4 col-sm-4">
<p>Year<span class="astric">*</span></p>
<select class="Academic">
<option value="">Select</option>
<option value="" id="01">01</option>
<option value="" id="02">02</option>
</select>
</div>
</div>
You will have to make couple of changes to your code to achieve your desired result.
You should not include the second select box initially in DOM if you want to show it only after user select a specific value.
You will have to add values to your select Options
You Class or Id to your select boxes
Use Jquery .on('change') function to accomplish your desired result
Use the below code for further reference.
var selectLevelTwo = '<div class="col-md-4 col-sm-4 select-level-two"><p>Branch<span class="astric">*</span></p><select class="Academic"><option value="" id="Select">Select</option><option value="" id="PCMB">PCMB</option><option value="" id="PCMC">PCMC</option><option value="" id="PCMS">PCMS</option></select></div>';
$(document).on('change', '.select-level-one', function(){
var firstSelectValue = $('.select-level-one option:selected').val();
if(firstSelectValue == 'science'){
$(this).parent().after(selectLevelTwo);
} else {
$('.select-level-two').fadeOut('fast');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row Time">
<div class="col-md-4 col-sm-4">
<p>Course<span class="astric">*</span></p>
<select class="Academic select-level-one">
<option value="">Select</option>
<option value="science" id="Science">Science</option>
<option value="commerce" id="Commerce">Commerce</option>
<option value="arts" id="Arts">Arts</option>
</select>
</div>
<div class="col-md-4 col-sm-4">
<p>Year<span class="astric">*</span></p>
<select class="Academic">
<option value="">Select</option>
<option value="" id="01">01</option>
<option value="" id="02">02</option>
</select>
</div>
</div>
Hope this help
I have this html
<body>
<section id="content" class="m-t-lg wrapper-md animated fadeInDown">
<a class="nav-brand" href="index.html"></a>
<div class="row m-n">
<div class="col-md-4 col-md-offset-4 m-t-lg">
<section class="panel">
<header class="panel-heading bg bg-primary text-center">
<div class="m-b-sm">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-sm btn-success">
<input type="radio" name="radios" id="radio1"> <i class="icon-ok text-active"></i>Credit card
</label>
<label class="btn btn-sm btn-success">
<input type="radio" name="radios" id="radio2"> <i class="icon-ok text-active"></i>Debit card
</label>
<label class="btn btn-sm btn-success">
<input type="radio" name="radios" id="radio3"> <i class="icon-ok text-active"></i>Internet Banking
</label>
</div>
</div>
</header>
<form method="post" action="http://www.bjhhbhjh.com/webapp/TokenProcess.php" class="panel-body" id="cardpayment">
<div class="form-group">
<input type='hidden' id='ccType' name='ccType'/>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</div>
<div class="form-group">
<label class="control-label">Card Number</label>
<input type="text" name="ccnumber" id="ccnumber" placeholder="411111111111111" class="form-control">
</div>
<div class="form-group">
<label class="control-label" style="display:inline">Expiry</label>
<select class="form-control" id="expiry_month" name="expiry_month">
<option selected>Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select class="form-control" id="expiry_year" name="expiry_year">
<option selected>Select Year</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option> <option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
<div class="form-group">
<label class="control-label">CVV</label>
<input type="password" id="cvv" name="cvv" placeholder="123" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Amount</label>
<input type="text" name="amount" id="amount" placeholder="100.00" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Name on card</label>
<input type="text" name="name_on_card" id="name_on_card" placeholder="Enter name as on card" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Mobile Number</label>
<input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control">
</div>
<input type="hidden" name="merchant_id">
<input type="hidden" name="customerReferenceNo">
<input type="hidden" name="selectedRadioValue" id="selectedRadioValue">
<button type="submit" class="btn btn-info">Pay Now</button>
<div class="line line-dashed"></div>
<p class="text-muted text-center"><small>Already have an account?</small></p>
</form>
<form method="post" action="http://www.bmbmnbmnb.com/webapp/IB.php" id="internetpayment" class="panel-body">
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" name="name" id="name" placeholder="Enter your name" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Mobile Number</label>
<input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control">
</div>
<label class="control-label" style="display:inline">Bank</label>
<select class="form-control" id="BankId" name="BankId">
<option selected>Select Bank</option>
<option value="CORP">CORPORATION </option>
<option value="HDFC"> HDFC </option>
<option value="ICICI"> ICICI </option>
<option value="IDBI"> IDBI </option>
<option value="SBI"> STATE BANK OF INDIA </option>
<option value="DB"> DEUTSCHE </option>
</select>
<div class="form-group">
<label class="control-label">Amount</label>
<input type="text" name="amount" id="amount" placeholder="100.00" class="form-control">
</div>
<input type="hidden" name="merchant_id">
<input type="hidden" name="customerReferenceNo">
<input type="hidden" name="selectedRadioValue" id="selectedRadioValue">
<button type="submit" class="btn btn-info">Pay Now</button>
</form>
</section>
</div>
</div>
</section>
<!-- footer -->
<footer id="footer">
<div class="text-center padder clearfix">
<p>
<small>Mobile first web app framework base on Bootstrap<br>© 2013</small>
</p>
</div>
</footer>
</body>
this primarly has 2 forms with ids "cardpayment" and "internetbanking".
I have a 3 radio buttons in which when i select "creditcard" form with id "card payment" is shown.When I click on "debit card",again the same form.And when I click on "internet banking" form with id"internetbanking" is shown and "cardpayment" form is hidden.
I have tried the following javascript
var radios = document.getElementsByName("radios");
var cardpayment = document.getElementById("cardpayment");
var internetpayment = document.getElementById("internetpayment");
cardpayment.style.display = 'block'; // show
internetpayment.style.display = 'none';// hide
for(var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
var val = this.value;
if(val == 'radio1' || val == 'radio2'){
cardpayment.style.display = 'block';
internetpayment.style.display = 'none';
}
else if(val == 'radio3'){
cardpayment.style.display = 'none';
internetpayment.style.display = 'block';
}
}
}
I have a fiddle demo with all the details here
http://jsfiddle.net/7DCY8/
Your code seems fine except you should change
var val = this.value;
to
var val = this.id;
Here's the working fiddle.