Toggle element class on checkbox state - javascript

The class hidden should be toggling based on if the checkbox is checked. One of the drop-down menus should be hidden and the other be displayed.
maybe my ternary operator isn't set up properly.
Thanks in advance.
function toggleButton() {
var toggler = $("input[name='toggler']").prop('checked');
var awardOptions = $('#awardOptions');
var yearOptions = $('#yearOptions');
var awardShow = awardOptions.removeClass('hidden');
var yearShow = yearOptions.removeClass('hidden');
var awardHide = awardOptions.addClass('hidden');
var yearHide = yearOptions.addClass('hidden');
console.log(toggler);
return (toggler) ? (awardShow,yearHide) : (awardHide, yearShow);
}
$('#toggler').on('click', function(){
toggleButton();
});
.hidden {
display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggleWrapper">
<input type="checkbox" class="dn" name="toggler" id="toggler" checked/>
<label for="toggler" class="toggle">
<span class="toggle__handler"></span>
</label>
</div>
<div class="inputBox" id="filter">
<div class="dropdown hidden" id="yearOptions">
<select id="hof-year">
<option value="0">Choose a Year</option>
<option value="2016">2016</option>
</select>
</div>
<div class="dropdown" id="awardOptions">
<select id="hof-accomp">
<option value="0">Choose an Award</option>
</select>
</div>
</div>
This is the function I'm using to trigger the toggleButton function.
$('#toggler').on('click', function(){
toggleButton();
});

You can use var awardShow = awardOptions.toggleClass('hidden'); instead of using addClass or removeClass.
$('#toggler').on('click', function(){
$('#awardOptions, #yearOptions').toggleClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggleWrapper">
<input type="checkbox" class="dn" name="toggler" id="toggler" checked/>
<label for="toggler" class="toggle">
<span class="toggle__handler"></span>
</label>
</div>
<div class="inputBox" id="filter">
<div class="dropdown hidden" id="yearOptions">
<select id="hof-year">
<option value="0">Choose a Year</option>
<option value="2016">2016</option>
</select>
</div>
<div class="dropdown" id="awardOptions">
<select id="hof-accomp">
<option value="0">Choose an Award</option>
</select>
</div>
</div>

Related

Being able to re-use to a JavaScript function

I've carried around a really useful JavaScript function for a while, not entirely sure of the origin (probably here on Stack Overflow) but it's certainly not something I've written as I know very little JS.
It basically reveals form sections based on the chosen select option. It works a charm when used once, however I'm now in a situation whereby I have a fairly complex form and need to use it multiple times. The obvious method is to copy\paste and simply rename each function thus making it unique. However, that's a lot of replicated code.
My issue is if I re-use it, the two select fields interfere with each other. I've tried seeing if I can lock it down or it isolate is using an ID but I'm struggling.
Minimum, reproducible example:
var current;
function reveal(element) {
if (current !== undefined) {
var chosen = document.getElementById(current);
chosen.classList.remove("visible");
chosen.classList.add("hidden");
}
var fetchMe = element.options[element.selectedIndex].getAttribute('data-show');
if (fetchMe !== null) {
current = fetchMe;
var fetched = document.getElementById(fetchMe);
fetched.classList.remove("hidden");
fetched.classList.add("visible");
}
}
.hidden {
display: none;
}
.visible {
display: block;
}
<h2>Knowledge</h2>
<select onchange="reveal(this)">
<option>Select...</option>
<option data-show="known">Known</option>
<option data-show="unknown">Unknown</option>
</select>
<div class="hidden" id="known">
<input type="text" name="known" value="Known">
</div>
<div class="hidden" id="unknown">
<input type="text" name="unknown" value="Unknown">
</div>
<h2>Superheroes</h2>
<select onchange="reveal(this)">
<option>Select...</option>
<option data-show="batman">Batman</option>
<option data-show="superman">Superman</option>
</select>
<div class="hidden" id="batman">
<input type="text" name="batman" value="Batman">
</div>
<div class="hidden" id="superman">
<input type="text" name="supermann" value="Superman">
</div>
Ideally I want to be ringfence it, or use an ID to limit it.
Also available as a Fiddle.
I kept your logic.
Now your select need id (here id1, id2 for the example)
Your variable "current" is now an object, where each property is an id of select
Be careful with 'var' usage. You should use 'const' or at least 'let' to avoid side effects
var current = {};
function reveal(element) {
const idSelect = element.id
if (current[idSelect] !== undefined) {
var chosen = document.getElementById(current[idSelect]);
chosen.classList.remove("visible");
chosen.classList.add("hidden");
}
var fetchMe = element.options[element.selectedIndex].getAttribute('data-show');
if (fetchMe !== null) {
current[idSelect] = fetchMe;
var fetched = document.getElementById(fetchMe);
fetched.classList.remove("hidden");
fetched.classList.add("visible");
}
}
.hidden {
display: none;
}
.visible {
display: block;
}
<h2>Knowledge</h2>
<select onchange="reveal(this)" id="id1">
<option>Select...</option>
<option data-show="known">Known</option>
<option data-show="unknown">Unknown</option>
</select>
<div class="hidden" id="known">
<input type="text" name="known" value="Known">
</div>
<div class="hidden" id="unknown">
<input type="text" name="unknown" value="Unknown">
</div>
<h2>Superheroes</h2>
<select onchange="reveal(this)" id="id2">
<option>Select...</option>
<option data-show="batman">Batman</option>
<option data-show="superman">Superman</option>
</select>
<div class="hidden" id="batman">
<input type="text" name="batman" value="Batman">
</div>
<div class="hidden" id="superman">
<input type="text" name="supermann" value="Superman">
</div>
I'm not sure what the point of the external variable is considering you have the data you need in the option attributes. This can be vastly simplified to not even require an argument.
Also, let's use an event listener instead of inline JavaScript.
function reveal() {
// hide all
document.querySelectorAll('.hidden').forEach(el => {
el.style.display = 'none';
});
// show for each select
document.querySelectorAll('select').forEach(el => {
const selectedVal = el.selectedOptions[0].dataset.show;
if (selectedVal) {
document.getElementById(selectedVal).style.display = 'block';
}
});
}
document.querySelectorAll('select.special').forEach(el => {
el.addEventListener('change', reveal);
});
.hidden {
display: none;
}
<h2>Knowledge</h2>
<select class="special">
<option>Select...</option>
<option data-show="known">Known</option>
<option data-show="unknown">Unknown</option>
</select>
<div class="hidden" id="known">
<input type="text" name="known" value="Known">
</div>
<div class="hidden" id="unknown">
<input type="text" name="unknown" value="Unknown">
</div>
<h2>Superheroes</h2>
<select class="special">
<option>Select...</option>
<option data-show="batman">Batman</option>
<option data-show="superman">Superman</option>
</select>
<div class="hidden" id="batman">
<input type="text" name="batman" value="Batman">
</div>
<div class="hidden" id="superman">
<input type="text" name="supermann" value="Superman">
</div>
Instead of keeping selected input in a global variable which make the function hard to reuse, work through each select options separately:
function reveal(element) {
var options = element.options;
for (var i = 0; i < options.length; i++) {
var option = options[i].getAttribute('data-show');
var chosen = option && document.getElementById(option);
if (chosen !== null) {
if (i === element.selectedIndex) {
chosen.classList.remove("hidden");
chosen.classList.add("visible");
} else {
chosen.classList.remove("visible");
chosen.classList.add("hidden");
}
}
}
}
.hidden {
display: none;
}
.visible {
display: block;
}
<h2>Knowledge</h2>
<select onchange="reveal(this)">
<option>Select...</option>
<option data-show="known">Known</option>
<option data-show="unknown">Unknown</option>
</select>
<div class="hidden" id="known">
<input type="text" name="known" value="Known">
</div>
<div class="hidden" id="unknown">
<input type="text" name="unknown" value="Unknown">
</div>
<h2>Superheroes</h2>
<select onchange="reveal(this)">
<option>Select...</option>
<option data-show="batman">Batman</option>
<option data-show="superman">Superman</option>
</select>
<div class="hidden" id="batman">
<input type="text" name="batman" value="Batman">
</div>
<div class="hidden" id="superman">
<input type="text" name="supermann" value="Superman">
</div>
I realise there is already some great answers here (including an accepted one) but here's my take on it:
function reveal(selectElem) {
//for each of this selectElem's options
for (const option of selectElem) {
var div = document.getElementById(option.getAttribute('data-show'));//find the corresponding div
if(div!=undefined){//if it exists
div.classList.add("hidden");//hide it
if(option.selected){//if its selected
div.classList.remove("hidden");//show it
}
}
}
}
.hidden {
display: none;
}
<h2>Knowledge</h2>
<select onchange="reveal(this)">
<option>Select...</option>
<option data-show="known">Known</option>
<option data-show="unknown">Unknown</option>
</select>
<div class="hidden" id="known">
<input type="text" name="known" value="Known">
</div>
<div class="hidden" id="unknown">
<input type="text" name="unknown" value="Unknown">
</div>
<h2>Superheroes</h2>
<select onchange="reveal(this)">
<option>Select...</option>
<option data-show="batman">Batman</option>
<option data-show="superman">Superman</option>
</select>
<div class="hidden" id="batman">
<input type="text" name="batman" value="Batman">
</div>
<div class="hidden" id="superman">
<input type="text" name="supermann" value="Superman">
</div>

Show/hide div and clear filed value when change

I have some div that will show depending on the select value. Suppose there are two input fields name 'Apartment and Bechelor' If I select 'Apartment' some div and select field will show related to the apartment. The problem I am facing is, I can't clear the field value when selecting another. Like, after selecting 'Apartment', I will select Bachelor. Now it should be clear the value of the field which was under the apartment so that If I again select 'Apartment', I will get default values or clean fields.
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>
<script>
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
}
else{
$('#flat-type').hide();
}
});
var showDiv = document.getElementById("tenant-type");
showDiv.onchange = function(){
var hiddenDiv = document.getElementById("flat-type");
hiddenDiv.style.display = (this.value == "family") ? "block":"none";
var genderDiv = document.getElementById("gender");
genderDiv.style.display = (this.value == "bechelor") ? "block":"none";
};
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'bachelor' || $(this).attr('value') == 'sublet' || $(this).attr('value') == 'hostel' ){
$('#r-type').show();
$('#tenant').show();
$('#tenant-type').hide();
}
else{
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-type').show();
}
});
});
</script>
to reset the dropdown options you can set the value of the select elements selectIndex property to 0 with this line:
$('.form-control').prop('selectedIndex', 0);
and in your code:
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('#residential input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
$('#flat-type').show();
$('#r-type').hide();
$('#tenant').hide();
}
else{
$('#r-type').show();
$('#tenant').show();
$('#flat-type').hide();
$('#tenant-flat').hide();
}
$('.form-control').prop('selectedIndex', 0);
});
$('#tenent-type').on('change', function() {
if($('#flat-type').val =='family') {
$('#flat-type').show();
} else {
$('#flat-type').hide();
}
if($('#gender').val =='bechelor') {
$('#gender').show();
} else {
$('#gender').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>

show/hide div on select option using jQuery

I built this code in order to show/hide div when an option is selected from the list but nothing happen when i click on an option.
My HTML :
<div class="row">
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
<input type="text" name="length" class="dimension" placeholder="Length">
</div>
My jQuery :
$(function() {
$('#row_dim').hide();
$('#type').change(function(){
if($('#type').val() == 'parcel') {
$('#row_dim').show();
} else {
$('#row_dim').hide();
}
});
});
if your code generate to dynamic than used to this $(document).on as like this
$(function() {
$('#row_dim').hide();
$(document).on('change', '#type', function(){
if($('#type').val() == 'parcel') {
$('#row_dim').show();
} else {
$('#row_dim').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
<input type="text" name="length" class="dimension" placeholder="Length">
</div>
Add jquery library file
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div class="row">
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
<input type="text" name="length" class="dimension" placeholder="Length">
</div>
https://jsfiddle.net/9wLn265s/

Remove all other div's on click of a image

<label>Project Type </label>
<div>
<select name="category" id="category" class="form-control ">
<option value="">Select Project Type</option>
<option value="Independent_House">Independent House</option>
<option value="Duplex_House">Duplex House</option>
<option value="Pent_House">Pent House</option>
</select>
</div>
<div class="cato" id="category_Independent_House" style="display:none">
<input type="button" id="addindependant" value="Add Property" />
<div id="cato_Independent_House">
<div class="form-group">
<label>Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Duplex_House" style="display:none">
<input type="button" id="addduplex" value="Add Property" />
<div id="cato_Duplex_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Pent_House" style="display:none">
<input type="button" id="addpenthouse value="Add Property" />
<div id="cato_Pent_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<script type="text/javascript">
js(function() {
js('#addindependant').click(function(e){
js('#cato_Independent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addduplex').click(function(e){
js('#cato_Duplex_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addpenthouse').click(function(e){
js('#category_Pent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
});
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
});
});
</script>
This is my code. When I select the category based upon the category selected the divs cato_Independent_House cato_Duplex_House and category_Pent_House get appended to their respective categories.
Consider first independant house is selected from drop down so its respective cato_Independent_House gets appended to the div with id id="category_Independent_House" on click of the button.after that when duplex house is selected from drop down its respective 'cato_Duplex_House' gets appended to div with id="cato_Duplex_House" on click of the button.
But when I go back and select Independant house it must not show previous selected div until the button is clicked. But here the div is already been displayed even the button is not clicked when I go back.The previous menu should show its div only when the button is clicked.i.e, the previous divs must get empty or removed when other option is selected.How to do this?
js
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('.cato').each(function() {
console.log(js('.cato'));
if(js(this).attr('data-visible') != "true") {
js(this).hide();
}
});
js('#category_'+selection).show('slow');
});
js('.addProperty').click(function(){
js(this).parents('.cato').attr('data-visible','true');
});
});
html
<input type="button" id="addduplex" value="Add Property" class="addProperty" />
add class addProperty to all your add property input
Working JsFiddle Link. I guess this is what you wanted
You should use the jquery hide method to hide the others divs depending on wich one you have selected:
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
if(selection=="Independent_House"){
js('#cato_Duplex_House').hide();
js('#cato_Pent_House').hide();
}else if(...){
{otherCases}
});});
And if you want to clear also the inputs selection of each div you could do something like this:
js("#input_controller_id_to_clear")[0].selectedIndex = -1;

Show form based on radio button select [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have the following html which has two forms with form id=cardpayment for first form and form id="intenetpayment" for the second.
Also I have 3 radio buttons named "Debit card","Credit Card","Internet Banking".
All I want to do is,when I select the radio button Debitcard or Credit card,form with id="cardpayment" should be shown and the other form should be hidden and when i click on Internetbanking radio button , form with id="cardpayment" should be hidden and form with id="internetpayment" should be shown. Im new to jquery and javascript.I checked online that this can be done using a css by adding/removing a css class
{
display:none;
}
But i dont know how to make it work using javascript.
You can find the fiddle at http://jsfiddle.net/d5qDb/1/
Pardon for the long question,and I havnt included the css here for not confusing the question.It is in the fiddle anyway.thanks in advance for any help.I have given the division to two forms below.
<body>
<div id="credit-card">
<header>
<span class="title" style="background-image: url('images/fethrpowered.png');"><strong>Card Payment:</strong> Enter payment details</span>
<span class="close"><img src="images/close.png"/></span>
</header>
<section id="content">
<div class="title"><strong>Payment Mode- Select your payment mode</strong></div>
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios"value="false">
<label for="radio2">Debit Card</label>
<input type="radio" id="radio3" name="radios"value="false">
<label for="radio3">Internet Banking</label>
<form method="post" id="cardpayment">
<div style="float:right;margin-top:50px;">
<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="table form-fields">
<div class="row">
<div class="label">Card Number:</div>
<div class="input full"><input type="text" name="ccnumber" id="ccnumber" placeholder="8763125487533457"/><br/></div>
</div>
<div class="row">
<div class="label">Card Type:</div>
<div class="input full">
<select class="styled">
<option selected>Visa</option>
<option>Mastercard</option>
<option>Maestro</option>
<option>SBI Maestro</option>
</select>
</div>
<div class="valid"></div>
</div>
<div class="row">
<div class="label">Your name:</div>
<div class="input full"><input type="text" name="name" id="name" placeholder="Mr. Personality of TV"/></div>
</div>
<div class="row name">
<div class="label">Expires On:</div>
<div class="input size50">
<select class="styled">
<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="styled">
<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="valid"></div>
</div>
<div class="row name">
<div class="label">CVV Number:</div>
<div class="input size50"><input type="text" name="cvv" id="cvv" placeholder="490" maxlength="3"/></div>
</div>
</div>
<input type="submit" style="float:right" value="Pay Now"/>
</form>
<form method="post" id="internetpayment">
<div class="table form-fields">
<div class="row name">
<div class="label">Name:</div>
<div class="input full"><input type="text" name="name" id="Name" placeholder="Enter your name"/></div>
</div>
<div class="row name">
<div class="label">Email:</div>
<div class="input full"><input type="text" name="email" id="email" placeholder="Enter Email address"/></div>
</div>
<div class="row name">
<div class="label">Mobile Number:</div>
<div class="input size50"><input type="text" name="Mobile Number" id="mobileNo"/></div>
</div>
<div class="row name">
<div class="label">Bank:</div>
<div class="input size50">
<select name="BankId" class="styled" data-required="true" data-trigger="change">
<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>
<div class="valid"></div>
</div>
<div class="row name">
<div class="label">Amount:</div>
<div class="input size50"><input type="text" name="amount" id="amount" placeholder="10.00"/></div>
</div>
</div>
<input type="submit" style="float:right" value="Pay Now"/>
</form>
</section>
</div>
</body>
Using pure JavaScript:
Write this in your Script section.
var radios = document.getElementsByName("radios");
var cardpayment = document.getElementById("cardpayment");
var internetpayment = document.getElementById("internetpayment");
/* If Credit Card is selected by default, add these two lines of code.
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'){ // Assuming your value for radio buttons is radio1, radio2 and radio3.
cardpayment.style.display = 'block'; // show
internetpayment.style.display = 'none';// hide
}
else if(val == 'radio3'){
cardpayment.style.display = 'none';
internetpayment.style.display = 'block';
}
}
}
fiddle: http://jsfiddle.net/LbrCf/
Try this, using jQuery Onchange
$("#radio1, #radio2").on("change", function(){
$("#cardpayment").show();
$("#internetpayment").hide();
});
$("#radio3").on("change", function(){
$("#cardpayment").hide();
$("#internetpayment").show();
});
I added this JavaScript code into your JSFiddel to create that effect
$('#radio1').change(function() {
if(this.checked) {
$('#cardpayment').show();
$('#internetpayment').hide();
}
});
$('#radio2').change(function() {
if(this.checked) {
$('#internetpayment').show();
$('#cardpayment').hide();
}
});
Your jQuery code should look something like this:
$(document).ready(function(){
$('#internet_radio').on('click', function(){
$('#cardpayment').hide();
$('#internetpayment').show();
})
$('#debit_radio').on('click', function(){
$('#cardpayment').show();
$('#internetpayment').hide();
})
})
Don't forget to load jQuery libraries to make this work.
Also the next time you need this type of functionality, you could use this. You don't really have to load their css files, only the js libraries, and you can style your tabs as you like.
Pretty simple. Just do this:
$("#radio1, #radio2").on("click", function(){
$("#cardpayment").show();
$("#internetpayment").hide();
});
$("#radio3").on("click", function(){
$("#cardpayment").hide();
$("#internetpayment").show();
});

Categories