Invert names of IDs in a form using Javascript - javascript

I have the following form:
<form id="currency" name="form" onsubmit="return redirect(this)">
<div style="clear:both;text-align: center;">
<select id="firstcurrency" class="selex" name="firstcurrency" style="float: left;">
<option value="usd">USD</option>
<option value="btc">BTC</option>
</select>
<span style="margin: 0 auto;">=</span>
<select id="secondcurrency" class="selex" name="secondcurrency" style="float: right;">
<option value="btc">RRR</option>
<option value="xvg">XVG</option>
<option value="xrp">XRP</option>
<option value="ntx">NTX</option>
</select>
<p style="clear: both;"></p>
<p><input class="button" type="submit" value="Redirect Me" ></p>
<img src="/images/invert.png">Invert select
</form>
When I click on a tag (outside the form), I want it to do two things:
1) invert the values of IDs and names in the 2 select in the form above 2) change float values from left to right in the first select and from right to left in the second select.
After the click on a tag, the form should become:
<form id="currency" name="form" onsubmit="return redirect(this)">
<div style="clear:both;text-align: center;">
<select id="secondcurrency" class="selex1" name="secondcurrency" style="float: right;">
<option value="usd">USD</option>
<option value="btc">BTC</option>
</select>
<span style="margin: 0 auto;">=</span>
<select id="firstcurrency" class="selex2" name="firstcurrency" style="float: left;">
<option value="btc">RRR</option>
<option value="xvg">XVG</option>
<option value="xrp">XRP</option>
<option value="ntx">NTX</option>
</select>
<p style="clear: both;"></p>
<p><input class="button" type="submit" value="Redirect Me" ></p>
<img src="/images/invert.png">Invert select
</form>
It should do it again each time I press a tag.
What Javascript code would you use to do that?

Add separate css for the currencies then use this :
$('#invert').click(function(){
var firstCurr = $('#firstcurrency'),
secondCurr = $('#secondcurrency'),
tmpID = secondCurr.attr('id');
secondCurr.attr('id',firstCurr.attr('id'));
secondCurr.attr('name',firstCurr.attr('id'));
firstCurr.attr('id',tmpID);
firstCurr.attr('name',tmpID);
});
#secondcurrency {
float:right;
}
#firstcurrency {
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="currency" name="form" onsubmit="return redirect(this)">
<div style="clear:both;text-align: center;">
<select id="firstcurrency" class="selex" name="firstcurrency">
<option value="usd">USD</option>
<option value="btc">BTC</option>
</select>
<span style="margin: 0 auto;">=</span>
<select id="secondcurrency" class="selex" name="secondcurrency">
<option value="btc">RRR</option>
<option value="xvg">XVG</option>
<option value="xrp">XRP</option>
<option value="ntx">NTX</option>
</select>
<p style="clear: both;"></p>
</div>
<p><input class="button" type="submit" value="Redirect Me" ></p>
<a id="invert" href="javascript:void(0)"><!--href="convertitore-home"<img src="/images/invert.png">-->Invert select</a>

Related

Pop up new text box after click on "Others" from dropdown and database captured that new data

I found a way how to pop up a new text box after click on "Others" from the dropdown. But the problem here is database capture "Other" instead of the new data that I key in. For example I key in "Policeman" but it captured "Other" in my database.
<head>
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text"
name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
</head>
<form action="https://apps3.xendsys.com/emv3/index.php/lists/xl080bdvq5cc8/subscribe" method="post">
<div class="box box-primary borderless">
<div class="box-header">
<h3 class="box-title">Website Subscribers</h3>
</div>
<select name="OCCUPATION" id="OCCUPATION"
onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="Student">Student</option>
<option value="Educator">Educator</option>
<option value="Designer">Designer</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
<div class="box-footer">
<div class="pull-right"><input type="submit" class="btn btn-primary btn-flat" name="yt0" value="Subscribe"/></div>
<div class="clearfix"> </div>
</div>
</div>
</form>
What should I change ya?

How to get the details of elements in a div with a click function

I have four divs and each contains a title, image and button. How can i make the click of that button pick the details of the div it resides in only. I plan to do this with just one function for all four divs because i will be creating more divs on the page.
I have created the divs and all shares the same ids. Each div has its own title, image and button. After creating the function and using the onclick event listener, the function always returns the value of the first div even if i click the second, third or fourth.
I am new to JS but not afraid to grow and master it. I need help on this. Thanks
const forms = document.querySelectorAll("button[type=submit]");
for (const form of forms) {
form.addEventListener('click', function(event) {
let productName = document.getElementById('productName').innerText;
let productImg = document.getElementById('productImg').src;
let package = document.getElementById('package').value;
alert('Working See Details Below:' + '\n' + productName + '\n\n' + productImg + '\n\n' + package);
})
}
form {
width: 25%;
height: inherit;
overflow: auto;
float: left;
}
<body>
<form id="form">
<h1 id="productName">Div 1</h1>
<img src="img\red.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
<select name="category" id="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
<form id="form">
<h1 id="productName">Div 2</h1>
<img src="img\yellow.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
<select name="category" id="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
<form id="form">
<h1 id="productName">Div 3</h1>
<img src="img\blue.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
<select name="category" id="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
<form id="form">
<h1 class="productName">Div 4</h1>
<img src="img\black.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
<select name="category" id="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
My expectations as explained earlier is to have the button of a div return the details of the title, image source and user input from the select option moved to localStorage when i can then use it on other pages on the app.
IDs must be unique to the page. I recommend using classes instead.
This includes classes for "productName", "productImg", "package", and "form".
I also suggesting binding a "submit" handler to the forms, instead of a "click" handler to the buttons. This allows you to select classes inside the submitted form by using the this keyword.
Below, I've used preventDefault() to prevent the default "submit" action.
Here's a demonstration:
const forms = document.querySelectorAll(".form");
for (const form of forms) {
form.addEventListener('submit', function(event) {
event.preventDefault();
let productName = this.querySelector('.productName').innerText;
let productImg = this.querySelector('.productImg').src;
let package = this.querySelector('.package').value;
alert('Working See Details Below:' + '\n' + productName + '\n\n' + productImg + '\n\n' + package);
});
}
.form {
width: 25%;
height: inherit;
overflow: auto;
float: left;
}
<form class="form">
<h1 class="productName">Div 1</h1>
<img src="img\red.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
<select name="category" class="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
<form class="form">
<h1 class="productName">Div 2</h1>
<img src="img\yellow.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
<select name="category" class="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
<form class="form">
<h1 class="productName">Div 3</h1>
<img src="img\blue.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
<select name="category" class="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
<form class="form">
<h1 class="productName">Div 4</h1>
<img src="img\black.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
<select name="category" class="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>

Search box with dropdown options

I want to make a search box almost like this one https://roxburylibrary.org/ this is what I have done https://jsfiddle.net/fkjow82y/ the issue is it is not searching when a different option gets selected.
<script type="text/javascript">
function dosearch() {
var sf=document.catalogSearch;
var submit = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.keyword.value);
window.location.href = submit;
return false;
}
</script>
Index 0 contains the URL, since the other indexes contain other values, the error occurs. Below the correct code.
<p>
<script type="text/javascript">
function dosearch() {
var urlSubmit = "https://catalog.mainlib.org/search/searchresults.aspx?ctx=31.1033.0.0.6&type=Keyword";
var sf=document.catalogSearch;
if(sf.keyword.value!=""){
urlSubmit += "&term=" + escape(sf.keyword.value);
}
if(sf.sengines.selectedIndex > 0){
urlSubmit += "&by=" + sf.sengines.options[sf.sengines.selectedIndex].value;
}
window.location.href = urlSubmit;
return false;
}
</script>
</p>
<div class="floatright headerright">
<div class="top_search">
<div class="searcht">
<ul>
<li><a class="selected" href="#searchtab1">Search Catalog</a></li>
<li>Search Databases</li>
<li>Search Website</li>
</ul>
<div id="searchtab1" style="display: block;">
<form name="catalogSearch" id="catalogSearch" target="_blank" onsubmit="return dosearch()"class="searchform">
<input type="text" name="keyword" type="text" placeholder="Search" value=""/>
<select class="catalogselect" name="sengines"id="SearchBy">
<option selected="selected" value="" target="_blank">Any Field</option>
<option value="TI">Title</option>
<option value="AU">Author</option>
<option value="SU">Subject</option>
<option value="NOTE">General notes</option>
<option value="PUB">Publisher</option>
<option value="GENRE">Genre</option>
<option value="SE">Series</option>
<option value="ISBN">ISBN</option>
<option value="ISSN">ISSN</option>
<option value="LCCN">LCCN</option>
<option value="PN">Publisher No.</option>
<option value="SUDOC">SuDoc</option>
<option value="CODEN">CODEN</option>
<option value="STRN">STRN</option>
</select><input type="submit" name="btnG" class="searchsubmit" value="Go" /></form></div>
</div>
</div>
<div id="searchtab2">
<form class="searchform" action="https://roxburylibrary.org/collections-resources/databases/" method="POST">
<select name="subjectid" class="databaseselect">
<option class="inputbox2" value="business-resources" >Business Resources</option>
<option class="inputbox2" value="ematerials-ebooks-audio-books-videos" >eMaterials - eBooks, Audio Books, Videos</option>
<option class="inputbox2" value="health-and-science-resources" >Health and Science Resources</option>
<option class="inputbox2" value="history-and-geneaology-resources" >History and Geneaology Resources</option>
<option class="inputbox2" value="job-and-career-help" >Job and Career Help</option>
<option class="inputbox2" value="languages" >Languages</option>
<option class="inputbox2" value="literature-resources" >Literature Resources</option>
<option class="inputbox2" value="magazines-newspapers" >Magazines & Newspapers</option>
</select>
<input class="searchsubmit" type="submit" value="Go"/>
<input type="hidden" name="catsearch" value="1"/>
</form>
</div>
<div id="searchtab3">
<p>
<script type="text/javascript">
function dosearchweb() {
var sf=document.websearch;
var submit = sf.sengine.options[sf.sengine.selectedIndex].value + escape(sf.keyword.value);
window.location.href = submit;
return false;
}
</script>
</p>
<form name ="websearch"class="searchform" target="_blank" onsubmit="return dosearchweb()" name="sengine">
<input type="text" name="keyword" type="text" placeholder="Search this Website..." value="" target="_blank" />
<select class="catalogselect" name="sengine"id="SearchBy">
<option selected="selected" value="https://roxburylibrary.org//?s=" target="_blank"></option>
<input type="submit" class="searchsubmit" value="Go" />
</form>
</select>
</div>
</div>
</div>

Dynamic Form Submit URL

I have a drop-down form on a landing page that needs to change the Submit button URL upon form submission. See screen shot below:
Drop Down Screeshot
Here is the code for the form:
<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
<input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company">
<option value="">Select One</option>
<option value="Tire Dealer">Tire Dealer</option>
<option value="Auto Service Dealer">Auto Service Dealer</option>
<option value="Tire Wholesaler">Tire Wholesaler</option>
<option value="Auto Parts Shop">Auto Parts Shop</option>
<option value="Warehouse Distributor">Warehouse Distributor</option>
<option value="Jobber">Jobber</option>
<option value="Other">Other</option>
</select>
</div>
</fieldset>
</form>
I've found a few codes that seem like they could work, but I'm not experienced enough to a) alter the code for a dropdown menu and b) add more than one or two URLs (there are six or so options). Can anyone help?
Many thanks in advance :)
ETA: I'm not actually able to edit the form code, as it's drag-and-drop in my editor.
As I understand your code, the pageId is the important information. So I would put this as the value of your dropdown (below is just dummy data, needs to be replaced with actual pageIds) and set the value in the onchange method.
<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
<input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select id="which_best_describes_your_company" name="which_best_describes_your_company"
class="text form_elem_which_best_describes_your_company" onchange="selectionChanged(this.value)">
<option value="">Select One</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">Tire Dealer</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef33">Auto Service Dealer</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef34">Tire Wholesaler</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef35>Auto Parts Shop</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef36">Warehouse Distributor</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef37">Jobber</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef38">Other</option>
</select>
</div>
</fieldset>
</form>
<script>
function(selectedPageId){
document.getElementById('pageId).value = selectedPageId
}
</script>
Use a listener on the select element to capture the selected value and append or use it to modify the form action. The following example appends the selected value to the form action:
HTML:
<form id="form" action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32"><input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select onchange="updateFormAction()" id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company"><option value="">Select One</option><option value="Tire Dealer">Tire Dealer</option><option value="Auto Service Dealer">Auto Service Dealer</option><option value="Tire Wholesaler">Tire Wholesaler</option><option value="Auto Parts Shop">Auto Parts Shop</option><option value="Warehouse Distributor">Warehouse Distributor</option><option value="Jobber">Jobber</option><option value="Other">Other</option></select>
</div>
</fieldset>
</form>
Javascript:
function updateFormAction() {
var selectedVal = document.getElementById('which_best_describes_your_company').value
var form = document.getElementById('form')
form.setAttribute('action', form.action + '&company='+selectedVal)
}
Here is the fiddle to test it : https://jsfiddle.net/h23g6o3x/

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