/    Sign up×
Community /Pin to ProfileBookmark

Capturing a specific option selection

Copy linkTweet thisAlerts:
Aug 25.2005

I’m wondering if it’s possible to actually capture a specific option being selected in a select box.

My form name is “sale”, my select box name is “pay_method”.

Now what I would like to be able to do is when the user selects the credit card option to make the inputs for credit card specific payment visible (they begin hidden).

I would like to be able to do this without reloading the page. I know how to do it if it get’s reloaded .selectedIndex, buth that is what i would like to avoid.

I did try to use the onFocus event in the option. Didn’t work.

Any suggestions would be great

Chevy

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@chevyauthorAug 25.2005 — the div id that i want to make visible is "card_info"
Copy linkTweet thisAlerts:
@artoAug 25.2005 — Use [I]onchange[/I] event: [CODE]<select name="pay_method" onchange="document.getElementById('card_info').style.display=this.value==2?'block':'none';">
<option value="1">check</option>
<option value="2">credit card</option>
</select>

<div id="card_info" style="display: none;">
card info here...
</div>[/CODE]Arto
Copy linkTweet thisAlerts:
@chevyauthorAug 26.2005 — Thanks, that works perfectly!
Copy linkTweet thisAlerts:
@chevyauthorAug 26.2005 — Actually it didn't. It'll show the hidden div no matter what is selected. I want it to show the hidden div only if the credit card option is selected. Maybe with a function

onChange="show_hide(this.selectedIndex)"

show_hide(option)

{

if option="credit card" then

{div.style.visibility="visibile";}

}
Copy linkTweet thisAlerts:
@artoAug 26.2005 — Actually it didn't. It'll show the hidden div no matter what is selected.[/QUOTE]Well, I did test the code I posted and it worked correctly for me. Could be browser issue, which one are you using?

Besides, why did you say "works perfectly" if it didn't?

Maybe with a function[/QUOTE]Of course, you can use function. Try this: [CODE]<html>
<head>
<script type="text/javascript">
function show_hide(option) {
var div=document.getElementById('card_info');

if (option==1) div.style.display='block';
else div.style.display='none';
}
</script>
</head>

<body>
<select name="pay_method" onchange="show_hide(this.selectedIndex)">
<option value="1">check</option>
<option value="2">credit card</option>
</select>

<div id="card_info" style="display: none;">
card info here...
</div>
</body>
</html>[/CODE]Arto
×

Success!

Help @chevy 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.18,
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,
)...