/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Javascript method for changing radio button states from outside the form

Copy linkTweet thisAlerts:
Jul 13.2006

Hi,

I am working on integrating a shopping cart solution into a friends site. We want to be able to click on one of the images on the site (not within a form tag) and have it change the state of radio buttons (in a form tag).

I have tried a variety of code snippets to no avail. The page that I have been working on is posted at:

[url]http://www.ssteindesign.com/sandbox/001-toolbag.html/[/url]

The current attempt includes the a call to this function:

function function1() {
form.purchaseForm.product[0].checked = true;
}

it is called in this html:

<img src=”/images/001-red-thumb.jpg” alt=”Toolbag in black canvas with espresso and red suede” width=”124″ height=”124″ id=”red” onclick=”MM_callJS(‘function1()’)” onmousedown=”MM_swapImage(‘big1′,”,’/images/001-red-252.jpg’,1);MM_swapImage(‘colors’,”,’/images/colors-red.png’,1)” />

The form looks like this:

<input name=”product[]” type=”radio” value=”black/espresso/red” />
<span class=”style6″> espresso/red </span><br />
<input name=”product[]” type=”radio” value=”odgreen/wine/parsley” />
<span class=”style6″>wine/parsley</span> <br />
<input name=”product[]” type=”radio” value=”burgundy/berry/parsley”/>
<span class=”style6″>berry/parsley</span><br />
<input name=”product[]” type=”radio” value=”black/espresso/lavendar”/>

The idea is that one could click on one of the four handbags and the radio button in the Purchase area would adjust accordingly, depending on the color clicked on. Any help would be much appreciated.

Thanks!

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@James_GatkaJul 13.2006 — apm: Try it this way:

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Title
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function toggle(nItem,nName){

var nProduct = document.getElementsByName(nName);
(nProduct[nItem].checked) ? nProduct[nItem].checked = false : nProduct[nItem].checked = true;
}

</script>
<style type="text/css">

form {position:absolute;left:30%;top:5%;}
fieldset {width:300px;padding:5px;background-color:#f0fff0;}
legend {font-size:14pt;color:#00008b;background-color:#afeeee;padding:5px;margin:10px;font-family:arial}
label {font-size:12pt;margin:15px}

</style>
</head>
<body>

<img src="/images/001-red-thumb.jpg" alt="Toolbag in black canvas with espresso and red suede" width="124" height="124" id="red" onclick="toggle(0,'product[]')">

<form method="post" action="">
<fieldset>
<legend> Toolbags </legend>
<label> <input name="product[]" type="radio" value="black/espresso/red"> Espresso Red </label>
<br>
<label> <input name="product[]" type="radio" value="odgreen/wine/parsley"> Wine Parsley</label>
<br>
<label> <input name="product[]" type="radio" value="burgundy/berry/parsley"> Berry Parsley </label>
<br>
<label> <input name="product[]" type="radio" value="black/espresso/lavendar"> Espresso Lavender </label>
</fieldset>
</form>

</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@apmauthorJul 13.2006 — Thanks. I tried your script directly in my page, and it didn't work. Then I tried it in a page by itself, and it still didn't work. Any other ideas out there?
Copy linkTweet thisAlerts:
@James_GatkaJul 13.2006 — The code works. Test it as is, meaning copy all of it, AS IS, save it as an .html file. Open the file. Test it.
Copy linkTweet thisAlerts:
@apmauthorJul 13.2006 — Okay, I can see that it works on its own. I will futz with it in my page to see if I can get it working.

Thanks for this. By the way I like the way you used CSS to style the buttons. I should do the same, instead of the lazy way I was doing it ?
Copy linkTweet thisAlerts:
@James_GatkaJul 13.2006 — Good luck with the rest of your project. Pass a number and a name to the function. Zero is the first item with that name.
Copy linkTweet thisAlerts:
@apmauthorJul 13.2006 — So, I futzed with your code for a while adding all of my junk in one at a time, and discovered that if I placed the hidden form elements in before the radio buttons that it would work, so I put them at the end, and it did work!

Thanks so much James. You were a big help.
×

Success!

Help @apm 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...