We Keep Coding

setTimeout not working with an onclick

I have the following:
onclick="setTimeout(overlayDisplayButton, 3000)"
It appears not to be working and I am starting to learn javascript/jquery, so most likely there is something wrong with the way I am doing.
I was trying originally to use callback so the overlay would disappear when the results were retrieved, but I do not fully understand how it works and so figured for the meantime, have a delay to show the results.
The following is script I am using:
<script>
$(document).ready(function(){
$('#zip').on("input",function(){
$('#city option[value=""]').prop('selected',true);
})
$('#city').on("change",function(){
$('#zip').val("");
})
})
function displayOverlay(text) {
$("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({
"position": "fixed",
"top": "0px",
"left": "0px",
"width": "100%",
"height": "100%",
"background-color": "rgba(0,0,0,.6)",
"z-index": "10000",
"vertical-align": "middle",
"text-align": "center",
"color": "#fff",
"font-size": "40px",
"font-weight": "bold",
"cursor": "wait",
"overflow-y":"hidden"
}).appendTo("body");
}
function removeOverlay() {
$("#overlay").remove();
}
$(function overlayDisplayButton() {
$(".btn").click(function () {
if ($("#overlay").length > 0) {
removeOverlay();
} else {
displayOverlay("Loading...");
}
});
});
</script>
And the following is the form that I am using that calls the setTimeout:
<div class="panel panel-default">
<div class="panel-body">
<!--- <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar--->
<form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form">
<div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div>
<div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div>
<div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option>
<option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div>
<div class="form-group">
<SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="cityFind">
<option value=#city#>#city#</option>
</cfoutput>
</select>
<!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>---->
</div>
<div class="row">
<div class="col-xs-6 no-right-padding paddingLanguage">
<div class="form-group widthLanguage">
<select name="language" class="form-control" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<option value=""></option>
<cfoutput query="Languages">
<option value=#Language#>#Language#</option>
</cfoutput>
</select>
<!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<option ng-repeat="l in Languages">{{l.Lang}}</option>
</select>--->
</div>
</div>
<div class="col-xs-6 no-left-padding">
<div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender">
<option disabled="disabled" selected="selected" value="">Gender</option>
<option value=""></option>
<option>Male</option><option>Female</option> </select></div>
</div>
</div>
<hr class="hrDoctor" />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.distance"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select>
<div class="input-group-addon">mi</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" data-default=""/></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block ignore" ng-click="gotoElement('SearchResultsAnchor');" onclick="setTimeout(overlayDisplayButton(), 3000)" type="submit" value="Search" /></div>
<!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset" onClick="window.location.reload()"/></div>--->
</form>
<!---</div><!---Progress bar--->--->
</div>
</div>
So I thought if I do the onclick and set it to equal to setTimeout(...), it would last for 3 seconds and then will let the user see the results.
However, that is not the case and not seeing what is the problem.

Your current HTML isn't exactly what you copied:
<... onclick="setTimeout(overlayDisplayButton(), 3000)" ...>
The error is that you are calling overlayDisplayButton, instead of passing it as an argument.
In javascript functions are also values. The setTimeout function requires a function as first argument, so you should pass it like this:
<... onclick="setTimeout(overlayDisplayButton, 3000)" ...>
Besides that, it's correct what #Mike C points out: overlayDisplayButton is just adding an event handler to a button. Maybe what you want to do is this:
function overlayDisplayButton() {
if ($("#overlay").length > 0) {
removeOverlay();
} else {
displayOverlay("Loading...");
}
}

Need help writing a Javascript to add values

I need help in writing JavaScript code for my form. I need to add the values in the text fields(credit cards, payday loans and unsecured personal loans) and if the total gets more than or equal to $10000, on submit it should take the user to page 1, else page 2. I just want to add the first three fields, it doesn't matter what the user inputs in the other fields. Here's my form:
<form action="/fsg?pageId=0bd004f9-aabc-486e-be09-bf2621555e3e&variant=b" method="POST">
<input type="hidden" name="pageId" value="0bd004f9-aabc-486e-be09-bf2621555e3e"><input type="hidden" name="pageVariant" value="b">
<fieldset class="clearfix" style="width: 297px; height: -17px;">
<div class="lp-pom-form-field clearfix" id="container_What_state_do_you_live_in">
<label for="What_state_do_you_live_in" class="main lp-form-label" id="label_What_state_do_you_live_in">
State? *</label><select id="What_state_do_you_live_in" name="What_state_do_you_live_in" class="text form_elem_What_state_do_you_live_in">
<option value="">Select a State</option>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
<option value="Florida">Florida</option>
<option value="Michigan">Michigan</option>
<option value="Nevada">Nevada</option>
<option value="New York">New York</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Texas">Texas</option>
<option value="Virginia">Virginia</option>
<option value="I reside in another state.">I reside in another state.</option></select>
</div>
<div class="lp-pom-form-field clearfix" id="container_credit_cards">
<label for="credit_cards" class="main lp-form-label" id="label_credit_cards">Credit Cards</label><input type="text" id="credit_cards" name="credit_cards" class="text form_elem_credit_cards">
</div>
<div class="lp-pom-form-field clearfix" id="container_payday_loans">
<label for="payday_loans" class="main lp-form-label" id="label_payday_loans">Payday Loans</label><input type="text" id="payday_loans" name="payday_loans" class="text form_elem_payday_loans">
</div>
<div class="lp-pom-form-field clearfix" id="container_unsecured_personal_loans">
<label for="unsecured_personal_loans" class="main lp-form-label" id="label_unsecured_personal_loans">Unsecured Personal Loans</label><input type="text" id="unsecured_personal_loans" name="unsecured_personal_loans" class="text form_elem_unsecured_personal_loans">
</div>
<div class="lp-pom-form-field clearfix" id="container_student_loans">
<label for="student_loans" class="main lp-form-label" id="label_student_loans">Student Loans</label><input type="text" id="student_loans" name="student_loans" class="text form_elem_student_loans">
</div>
<div class="lp-pom-form-field clearfix" id="container_auto_loan">
<label for="auto_loan" class="main lp-form-label" id="label_auto_loan">Auto Loan</label><input type="text" id="auto_loan" name="auto_loan" class="text form_elem_auto_loan">
</div>
<div class="lp-pom-form-field clearfix" id="container_medical_bills">
<label for="medical_bills" class="main lp-form-label" id="label_medical_bills">Medical Bills</label><input type="text" id="medical_bills" name="medical_bills" class="text form_elem_medical_bills">
</div>
<input type="submit" name="submit" id="submit" value="Submit">
</form>

var total = $('#Creditcards').val() + $('#Payday').val() + $('#Unsecured').val();
$('.submit').click(function(){
if(total<10000)
{window.href.location = "x"}
else{
window.href.location = "y";
}
})

Jquery get value of select in div above

I have the following HTML form. I'm trying to get the value of the .plotNumber select and also the value of the sub_category field.
Note: The user is able to add new rows to the form, so there may be multiple blocks of <div class="standard-row add-admin-row input-row">.
My code so far (which works) apart from the plot and category is:
$('.wrapper').on('input', '.inp-calculate', function(e)
{
var input = $(this);
//var plot = input.val(); // get plot id
//var category = input.val(); // get category id
var units = input.val(); // get units
$.post('checkUnits.php', {
plot_id: plot,
category_id: category,
units: units
}, function(data) {
var data = $.parseJSON(data);
if(data[0] !== true) {
alert(data);
input.focus();
input.val('');
}
});
});
I have tried the following solutions which do not work:
$(this).parent().siblings().find('.plotNumber').val();
HTML Code:
<form class="commentForm add-project-form clearfix" id="addWorksheet">
<div class="box box3 clearfix">
<div id="messages"></div>
<div class="sectionbox">
<fieldset class="clonable">
<legend><span>Worksheet</span></legend>
<p class="error-summary error-message"></p>
<div class="standard-row add-admin-row input-row">
<label class="ib">
<span class="label-stacked">Employee</span>
<span class="plain-select">
<select class="inp" data-myname="worksheet[*][employee]" name="employee">
<option value="">Select one...</option>
<option value="1">Test 1</option>
</select>
</span>
</label>
<label class="ib">
<span class="label-stacked">Week ending</span>
<span class="plain-select">
<select class="inp" data-myname="worksheet[*][week_ending]" name="week_ending">
<option value="">Select one...</option>
<option value="Sunday 22 Nov 2015">Sunday 22 Nov 2015</option>
</select>
</span>
</label>
<label class="ib">
<span class="label-stacked">Project</span>
<span class="plain-select">
<select class="inp project" data-myname="worksheet[*][project]" name="project">
<option value="">Select one...</option>
<option value="2">TEST</option>
</select>
</span>
</label>
</div>
<div class="standard-row wsheet-row input-row">
<label class="ib plothead ">
<span class="label-stacked">Plot Number</span>
<span class="plain-select">
<select class="inp plotNumber plotheadclone" data-myname="worksheet[*][plots][!][plot_number]" name="plot_number">
<option value="">Select one...</option>
<option value="6672">444</option>
<option value="6673">555</option>
<option value="6674">666</option>
</select>
</span>
</label>
<div class="plot-offset clearfix">
<div class="standard-row wsheet-row input-row" id="5438">
<label class="ib">
<span class="label-stacked">Category</span>
<select class="inp inp220 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][sub_category][]" name="sub_category">
<option value="5438">NON LABOUR</option>
</select>
</label>
<label class="ib"><span class="label-stacked">Total</span>
<input class="inp inp110 data-addup-total inp-calculate" data-myname="worksheet[*][plots][!][total_cost][]" name="total_cost" value="0.00" type="text">
<input data-myname="worksheet[*][plots][!][price][]" name="price" value="" type="hidden">
<input data-myname="worksheet[*][plots][!][number_units][]" name="number_units" value="" type="hidden">
</label>
</div>
<div class="standard-row wsheet-row input-row" id="5240">
<label class="ib">
<span class="label-stacked">Category</span>
<select class="inp inp220 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][sub_category][]" name="sub_category">
<option value="5240">1ST FIX CYLINDER</option>
</select>
</label>
<label class="ib">
<span class="label-stacked">Price</span>
<input class="inp inp110 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][price][]" name="price" value="£40.00" type="text"></label>
<label class="ib"> <span class="label-stacked">Number</span>
<input class="inp inp55 inp-calculate" data-myname="worksheet[*][plots][!][number_units][]" name="number_units" value="" type="text"></label><label class="ib"><span class="label-stacked">Total</span><input class="inp inp110 inp-disabled data-addup-total" readonly="" data-myname="worksheet[*][plots][!][total_cost][]" name="total_cost" value="£0.00" type="text"></label>
</div>
<div class="wsheet-labour-total">LABOUR: £80.00</div>
<div class="wsheet-nonlabour-total">NON LABOUR: £0.00</div>
<div class="wsheet-final-total">TOTAL CLAIM: £80.00</div>
</div>
</div>
</fieldset>
<div class="reveal-plot showingPlot"> Choose another plot</div>
</div>
<!-- end section box -->
<hr class="divider">
<div class="clonable">
<div class="clone empty"></div>
<div class="cb">
<div>
<p class="add remove-data"><i class="sprite minus2"></i> <span>Remove last row</span></p>
</div>
<div>
<p class="add add-data add-another-worksheet-employee"><i class="sprite plus2"></i> <span>Add another worksheet</span></p>
</div>
</div>
</div>
<div class="save-submit">
<button class="button" type="submit" data-url="addWorksheet.php" data-id="#addWorksheet">Submit</button>
</div>
</div>
<!-- end box -->
</form>
Can someone help find the solution?

You're not traversing far enough up the DOM with .parent() since the select is contained in a <div> three levels above .inp-calculate. How about:
$(this).closest('fieldset').find('.plotNumber').val();

Try like following. Hope this will help you.
var container=$(this).closest('.standard-row.add-admin-row.input-row');
var plot=container.find('.plotNumber').val();
var category=container.find('.inp220').val();

Use noUiSlider with this form

I'm in over my head with this stuff - I'm looking to make noUiSlider (http://refreshless.com/nouislider/) work with the following form. I want to have a slider for the Minimum and Maximum price values in the form, where the slider moves up in increments of $10,000. Is this possible?
<script type="text/javascript" src="http://idx.myrealpage.com/js/weblets/omnibox_wp.js"></script>
<div class="unibox-search unibox-search-regular">
<div class="unibox-label">
Enter city, area, postal code or MLS(r) number:
</div>
<div class="unibox-text-field">
<input type="text" onkeydown="uniboxKeyDown(event,this)" onkeyup="uniboxKeyUp(event,this)" placeholder="Enter city, area, postal code or MLS(r) number" class="unibox-field">
<button onclick="return uniboxSubmitted(this)" name="unibox-run" class="unibox-submit">Search</button>
</div>
<div class="unibox-controls">
<select onchange="runUniboxHits(this)" name="unibox-bedrooms" class="unibox-bedrooms">
<option value="">--- Bedrooms ---</option>
<option value="1">Min. 1 bedroom</option>
<option value="2">Min. 2 bedrooms</option>
<option value="3">Min. 3 bedrooms</option>
<option value="4">Min. 4 bedrooms</option>
<option value="5">Min. 5 bedrooms</option>
</select>
<select onchange="runUniboxHits(this)" name="unibox-bathrooms" class="unibox-bathrooms">
<option value="">--- Bathrooms ---</option>
<option value="2.0">Min. 2 bathrooms</option>
<option value="3.0">Min. 3 bathrooms</option>
<option value="4.0">Min. 4 bathrooms</option>
<option value="5.0">Min. 5 bathrooms</option>
</select>
</div>
<input type="text" class="unibox-price-min" placeholder="Min Price" onfocus="uniboxResetHint('Min Price',false,this);" onblur="uniboxResetHint('Min Price',true,this);" value="Min Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)">
<input type="text" class="unibox-price-max" placeholder="Max Price" onfocus="uniboxResetHint('Max Price',false,this);" onblur="uniboxResetHint('Max Price',true,this);" value="Max Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)">
</div>
<div class="unibox-quick-summary-line">
<span class="unibox-quick-summary"></span><span> </span>
</div>
<input type="hidden" value="recip" class="unibox-search-context" name="recip">
<input type="hidden" value="1" class="unibox-search-region" name="34">
<input type="hidden" value="29619" class="unibox-search-account" name="26743">
<input type="hidden" value="http://firsthomeplan.ca/propertylistings" class="unibox-search-result-page" name="/fairrealty/listings/">
<input type="hidden" value="AUTO" class="unibox-search-listing-type" name="AUTO">
</div>

jQuery(document).ready(function() {
$("#slider").noUiSlider({
start: [0, 1000000],
step: 10000,
connect: true,
range: {
'min': 0,
'max': 1000000
}
});
$("#slider").on('slide', function(event, values) {
$("input.unibox-price-min").val(values[0]);
$("input.unibox-price-max").val(values[1]);
});
});
#slider {
margin: 20px;
width: 70%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script src="https://raw.githubusercontent.com/leongersen/libLink/master/jquery.liblink.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
<script type="text/javascript" src="http://idx.myrealpage.com/js/weblets/omnibox_wp.js"></script>
<div class="unibox-search unibox-search-regular">
<div class="unibox-label">
Enter city, area, postal code or MLS(r) number:
</div>
<div class="unibox-text-field">
<input type="text" onkeydown="uniboxKeyDown(event,this)" onkeyup="uniboxKeyUp(event,this)" placeholder="Enter city, area, postal code or MLS(r) number" class="unibox-field">
<button onclick="return uniboxSubmitted(this)" name="unibox-run" class="unibox-submit">Search</button>
</div>
<div class="unibox-controls">
<select onchange="runUniboxHits(this)" name="unibox-bedrooms" class="unibox-bedrooms">
<option value="">--- Bedrooms ---</option>
<option value="1">Min. 1 bedroom</option>
<option value="2">Min. 2 bedrooms</option>
<option value="3">Min. 3 bedrooms</option>
<option value="4">Min. 4 bedrooms</option>
<option value="5">Min. 5 bedrooms</option>
</select>
<select onchange="runUniboxHits(this)" name="unibox-bathrooms" class="unibox-bathrooms">
<option value="">--- Bathrooms ---</option>
<option value="2.0">Min. 2 bathrooms</option>
<option value="3.0">Min. 3 bathrooms</option>
<option value="4.0">Min. 4 bathrooms</option>
<option value="5.0">Min. 5 bathrooms</option>
</select>
</div>
<input type="text" class="unibox-price-min" placeholder="Min Price" onfocus="uniboxResetHint('Min Price',false,this);" onblur="uniboxResetHint('Min Price',true,this);" value="Min Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)"
/>
<input type="text" class="unibox-price-max" placeholder="Max Price" onfocus="uniboxResetHint('Max Price',false,this);" onblur="uniboxResetHint('Max Price',true,this);" value="Max Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)"
/>
<div id="slider"></div>
</div>
<div class="unibox-quick-summary-line">
<span class="unibox-quick-summary"></span><span> </span>
</div>
<input type="hidden" value="recip" class="unibox-search-context" name="recip">
<input type="hidden" value="1" class="unibox-search-region" name="34">
<input type="hidden" value="29619" class="unibox-search-account" name="26743">
<input type="hidden" value="http://firsthomeplan.ca/propertylistings" class="unibox-search-result-page" name="/fairrealty/listings/">
<input type="hidden" value="AUTO" class="unibox-search-listing-type" name="AUTO">
</div>

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();
});