Develop Reference

Get Dynamic Select option in Clone Node using Javscript

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>

Hiding then showing HTML based off select value

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>

2 Select with same options, alerting when it is already selected at the first Select

I'm having a hard time with this, basically I have 2 Select with same options. The 2 Select Inputs named as registrationdiscounttype1 and registrationdiscounttype2
So First I choose a discount for registrationdiscounttype1 then if I will add a discount for registrationdiscounttype2 if the option is already selected in discount number 1 it will show an error that will say the discount is already selected.
I've already made a javascript based on what I've search so far, but I can't make it work, can you help me what is wrong with my code, or what should I use?
This is the sample photo
// Change in Discount 2
$("#registrationdiscounttype2").unbind('change').bind('change', function()
if ($('#registrationdiscounttype2').closest('table').find('option[value=' + $('#registrationdiscounttype1').val() + ']:selected').length > 1)
{
alert('Discount is already selected, Please choose another one');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<?php foreach ($discounttypeData as $discounttype)
{
?>
<option value="<?php echo $discounttype['discounttype_id']; ?>"> <?php echo $discounttype['discounttype_name']; ?> </option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<?php foreach ($discounttypeData as $discounttype)
{
?>
<option value="<?php echo $discounttype['discounttype_id']; ?>"> <?php echo $discounttype['discounttype_name']; ?> </option>
<?php
}
?>
</select>
</div>
</div>

u can try
$(document).ready(function(){
$("#registrationdiscounttype2").unbind('change').bind('change', function() {
if ($('#registrationdiscounttype2').val() == $('#registrationdiscounttype1').val())
{
alert('Discount is already selected, Please choose another one');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<option value="1">1 </option>
<option value="2">2 </option>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<option value="1">1 </option>
<option value="2">2 </option>
</select>
</div>
<div class="form-group" id="result">
</div>

Here you go with an example solution (if select element are siblings) https://jsfiddle.net/pvchxyup/1/
$('select').change(function(){
if($(this).val() === $(this).siblings('select').val() ){
console.log("Same value!!!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test5">Test 5</option>
</select>
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test7">Test 7</option>
</select>
If your element are not siblings, then follow https://jsfiddle.net/pvchxyup/2/
$('select').change(function(){
if($('#select1').val() === $('#select2').val() ){
console.log("Same value!!!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="select1">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test5">Test 5</option>
</select>
</div>
<div>
<select id="select2">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test7">Test 7</option>
</select>
</div>

No need to use bind, simple and easy way to do that.
Try this:
$("#registrationdiscounttype2").change(function(){
if($(this).val()==$('#registrationdiscounttype1').val()){
alert("Already Selected");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<option value="sel1">sel1</option>
<option value="sel2">sel2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<option value="sel1">sel1</option>
<option value="sel2">sel2</option>
</select>
</div>

Submit and Change jquery code rewrite

This code determines whether the form elements e.g. input fields, radio buttons and select fields have an attribute called required="required" then the jquery and add an error accordingly.
If the input field then has a value, then the change listener, should automatically remove the error.
The code works fine - However, its not been written well. There are lots of things being repeated.
What would be the best way of optimising the code?
$(document).ready(function() {
var count = 0;
$(".form-unique").attr('novalidate', "");
$('.form-unique').on('submit change', function(e) {
if (count > 0) {
$(this).find('.error-message').remove();
e.preventDefault();
console.log($('.supererror').length);
var dateField = $(".form-unique").find('#date-year').parent();
var _this = $(this);
var checkboxes = [];
_this.find(':input').each(function(i, val) {
$(this).css('border', 'transparent');
if ($(this).attr('required')) {
if ($(this).val() != '') {
$(this).removeClass('supererror');
if ($(this).attr('type') == "checkbox" || $(this).attr('type') == "radio") {
var checkboxName = $(this).attr('name');
if (checkboxes.indexOf(checkboxName) == -1) {
checkboxes.push(checkboxName);
var selector = "input:checked[type='radio'][name='" + $(this).attr('name') + "']";
if ($(selector).length == 0) {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
}
}
}
} else {
var superb = $(this).closest('div').find('label').text();
superb = superb.replace(/\*/g, '').replace(/\:/g, '');
$("input[type='checkbox'][name='submitted[yes_no]']").change(function() {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
});
$(this).addClass('supererror').css('border', '3px solid red');
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
}
}
});
}
});
$('.form-unique').on('submit', function(e) {
count++;
if (count == 1) {
$(this).find('.myaccount-invalid-email-content').remove();
e.preventDefault();
console.log($('.supererror').length);
var _this = $(this);
var checkboxes = [];
_this.find(':input').each(function(i, val) {
$(this).css('border', 'transparent');
if ($(this).attr('required')) {
if ($(this).val() != '') {
$(this).removeClass('supererror');
if ($(this).attr('type') == "checkbox" || $(this).attr('type') == "radio") {
var checkboxName = $(this).attr('name');
if (checkboxes.indexOf(checkboxName) == -1) {
checkboxes.push(checkboxName);
var selector = "input:checked[type='radio'][name='" + $(this).attr('name') + "']";
if ($(selector).length == 0) {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
}
}
}
} else {
var superb = $(this).closest('div').find('label').text();
superb = superb.replace(/\*/g, '').replace(/\:/g, '');
$("input[type='checkbox'][name='submitted[yes_no]']").change(function() {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
});
$(this).addClass('supererror').css('border', '3px solid red');
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
if ($(".moving-out-date-year").val() == "" || $(".moving-out-date-month").val() == "" || $(".moving-out-date-day").val() == "") {
$(".form-unique").find('.moving-out-date-year').parent().find(".myaccount-invalid-email-content").remove();
$(".form-unique").find('.moving-out-date-year').parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
} else {
$(".form-unique").find('.moving-out-date-year').parent().find(".myaccount-invalid-email-content").remove();
}
}
}
});
}
if ($('.supererror').length == 0) {
$('.form-unique').off();
$('.form-unique').submit();
}
});
});
.supererror{
border: 3px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form action="/" novalidate="" class="form-unique">
<div class="main-content">
<div class="new-markup">
<h3>Your contact details</h3>
</div>
<div class="name">
<label for="name">Full name: <span class="form-required">*</span></label>
<input id="name" required="required" type="text" name="submitted[name]" value="" class="form-text required"/>
</div>
<div class="new-e-mail-1">
<label for="e-mail-1">Email address: <span class="form-required">*</span></label>
<input id="e-mail-1" required="required" type="text" name="submitted[new_e_mail_1]" value="" class="form-text required"/>
</div>
<div class="phone-1">
<label for="phone-1">Phone number: <span class="form-required">*</span></label>
<input id="phone-1" required="required" type="text" name="submitted[phone_1]" value="" class="form-text required"/>
</div>
<div class="webform-component-markup moving-out">
<h3>Moving out</h3>
</div>
<div class="address-line-1">
<label for="address-line-1">House name/number: <span class="form-required">*</span></label>
<input id="address-line-1" required="required" type="text" name="submitted[address_line_1]" value="" class="form-text required"/>
</div>
<div class="address-line-2">
<label for="address-line-2">Street: <span class="form-required">*</span></label>
<input id="address-line-2" required="required" type="text" name="submitted[address_line_2]" value="" class="form-text required"/>
</div>
<div class="town-city">
<label for="town-city">District: </label>
<input id="town-city" type="text" name="submitted[town_city]" value="" class="form-text"/>
</div>
<div class="city">
<label for="city">City: </label>
<input id="city" type="text" name="submitted[city]" value="" class="form-text"/>
</div>
<div class="postcode2">
<label for="postcode2">Postcode: </label>
<input id="postcode2" type="text" name="submitted[postcode2]" value="" class="form-text"/>
</div>
<div class="webform-component-markup moving-date">
<h3>date</h3>
</div>
<div class="webform-component-date moving-out-date">
<label for="moving-out-date">Moving out date: <span class="form-required">*</span></label>
<div class="webform-container-inline webform-datepicker">
<label for="moving-out-date-year" class="element-invisible">Year </label>
<select id="moving-out-date-year" required="required" name="submitted[moving_out_date][year]" class="year form-select">
<option value="" selected="selected">Year</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>
</select>
<label for="moving-out-date-month" class="element-invisible">Month </label>
<select id="moving-out-date-month" required="required" name="submitted[moving_out_date][month]" class="month form-select">
<option value="" selected="selected">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<label for="moving-out-date-day" class="element-invisible">Day </label>
<select id="moving-out-date-day" required="required" name="submitted[moving_out_date][day]" class="day form-select">
<option value="" selected="selected">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<input id="dp1452155277044" type="image" src="/sites/all/modules/contrib/webform/images/calendar.png" alt="Open popup calendar" title="Open popup calendar" class="webform-calendar webform-calendar-start-2015-12-24 webform-calendar-end-2021-01-07 webform-calendar-day-0 hasDatepicker"/>
</div>
</div>
<div class="webform-component-markup new-address">
<h3>New address</h3>
</div>
<div class="addressnew-line-1">
<label for="addressnew-line-1">House name/number: </label>
<input id="addressnew-line-1" type="text" name="submitted[addressnew_line_1]" value="" class="form-text"/>
</div>
<div class="addressnew-line-2">
<label for="addressnew-line-2">Street: </label>
<input id="addressnew-line-2" type="text" name="submitted[addressnew_line_2]" value="" class="form-text"/>
</div>
<div class="town-city-new">
<label for="town-city-new">District: </label>
<input id="town-city-new" type="text" name="submitted[town_city_new]" value="" class="form-text"/>
</div>
<div class="county-new">
<label for="county-new">City: </label>
<input id="county-new" type="text" name="submitted[county_new]" value="" class="form-text"/>
</div>
<div class="postcode3">
<label for="postcode3">Postcode: </label>
<input id="postcode3" type="text" name="submitted[postcode3]" value="" class="form-text"/>
</div>
<div class="webform-component-markup take-us-with-you">
<h3>Take us with you</h3>
</div>
<div>
<label for="yes-no">yes?: </label>
<div id="yes-no" class="form-radios webform-radio-buttons">
<input id="yes-no-1" type="radio" name="submitted[yes_no]" value="1" class="webform-radio-buttons form-radio"/>
<label for="yes-no-1" class="option">No </label>
<input id="yes-no-2" type="radio" name="submitted[yes_no]" value="2" class="webform-radio-buttons form-radio"/>
<label for="yes-no-2" class="option">Yes </label>
</div>
</div>
<div class="form-actions">
<input type="submit" name="op" value="Submit" class="webform-submit button-primary form-submit"/>
</div>
</div>
</form>

$("form")[0].checkValidity() checks for form validity on modern browsers :P
Besides that it's indeed recommend to post this on codereview. There's nough to improve, too many ifs nested, full html variables in the code that can be replaced with a function which returns a html string that has a classname and text value input.

Cant toggle forms using JavaScript

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.