/    Sign up×
Community /Pin to ProfileBookmark

How to change contents of a page using radio buttons?

Copy linkTweet thisAlerts:
Jun 13.2009

I have a page with two radiobuttons – ‘Rent’ and ‘Buy’. I want the content below the buttons to change with respect to the radio button selected. I want a ‘select’ and a ‘textbox’ when I click ‘Rent’. I want a deifferent ‘select’ when I click ‘Buy’. I trie a lot but couldnt get a way to do it. Is this possible in JavaScript??? Please help.

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERJun 13.2009 — It's possible, but your requirements are not very clear concerning the contents after the radio buttons.

(So I made up my own ?)
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Rent or Buy&lt;/title&gt;
&lt;script type="text/javascript"&gt;
// From: http://www.webdeveloper.com/forum/showthread.php?t=211130

function ShowInfo(action) {
if (action == 'Rent') {
document.getElementById('BuyInfo').style.display = "none";
document.getElementById('RentInfo').style.display = "block";
} else {
document.getElementById('RentInfo').style.display = "none";
document.getElementById('BuyInfo').style.display = "block";
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input type="radio" name="Rent_Buy" value="Rent" onclick="ShowInfo(this.value)"&gt;Rent
or
&lt;input type="radio" name="Rent_Buy" value="Buy" onclick="ShowInfo(this.value)"&gt;Buy
&lt;div&gt;
&lt;div id="RentInfo" style="display:none"&gt;
&lt;select id="SBoxRent"&gt;
&lt;option value=""&gt;Bed/Bath Select&lt;/option&gt;
&lt;option value="1"&gt;1/1 Apt.&lt;/option&gt;
&lt;option value="2"&gt;2/1 Apt.&lt;/option&gt;
&lt;option value="3"&gt;2/2 House&lt;/option&gt;
&lt;option value="4"&gt;3/3 House&lt;/option&gt;
&lt;option value="5"&gt;4/3 Ranch&lt;/option&gt;
&lt;option value="6"&gt;10/8 Mansion&lt;/option&gt;
&lt;option value="6"&gt;25/20 Castle&lt;/option&gt;
&lt;/select&gt;
&lt;br&gt;
&lt;input type="text" id="RentReq"&gt;Rent Requirements
&lt;/div&gt;
&lt;div id="BuyInfo" style="display:none"&gt;
&lt;select id="SBoxBuy"&gt;
&lt;option value=""&gt;Bed/Bath Select&lt;/option&gt;
&lt;option value="1"&gt;1/1 House&lt;/option&gt;
&lt;option value="2"&gt;2/1 House&lt;/option&gt;
&lt;option value="3"&gt;2/2 Home&lt;/option&gt;
&lt;option value="4"&gt;3/3 Home&lt;/option&gt;
&lt;option value="5"&gt;4/3 Ranch&lt;/option&gt;
&lt;option value="6"&gt;10/8 Mansion&lt;/option&gt;
&lt;option value="6"&gt;25/20 Castle&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

?
×

Success!

Help @swayam07 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...