/    Sign up×
Community /Pin to ProfileBookmark

Can someone PLEASE help me write a for() for this.

Hey,

Ok, I have been trying to get some help with this for a while now. I thought some other members on here were gonna help me out, but that didn’t pan out. This has now become an emergency, as it’s Christmas Season, and I have to get this done!

Here’s the original drop-down code:

[code]
<select name=”VariantProductOption_ID” id=”VariantProductOption_ID3″ style=”font-family: Verdana; font-size: 8pt” size=”1″ onchange=”changePriceValue()”>

<option value=”6″ >17″ 1680 x 1050 UltraPix WSXGA+ Glassview LCD</option>

<option value=”7″ >17″ 1920 x 1200 UltraPix WUXGA+ w/ GlassView LCD [ADD $150.00]</option>

</select>[/code]

Here’s the radio button version:

[code]
<fieldset>

<legend>Display</legend>

<ul>
<li>
<label>
<input type=”radio” name=”VariantProductOption_ID” id=”VariantProductOption_ID3″ value=”6″ onclick=”changePriceValue()”>
17″ 1680 x 1050 UltraPix WSXGA+ Glassview LCD
</label>
</li>

<li>
<label>
<input type=”radio” name=”VariantProductOption_ID” id=”VariantProductOption_ID3″ value=”7″ onclick=”changePriceValue()”>
17″ 1920 x 1200 UltraPix WUXGA+ w/ GlassView LCD [ADD $150.00]
</label>
</li>
</ul>

</fieldset>[/code]

And, this is the .js that powers the price change:

[code]
<script language=”javascript”>

function changePriceValue()
{

if (document.getElementById(‘strRealPricePass65’)){
var ListPrice = document.getElementById(‘strRealPricePass65’).value
}else{
var ListPrice = 0
}

if (document.getElementById(‘strStrikePricePass65’)){
var StrikePrice = document.getElementById(‘strStrikePricePass65’).value
}else{
var StrikePrice = 0
}
curTotalPriceOfVariants = 0
curTotalPartMod = “”
//curTotalMfgPartMod = “”

strVariantProduct_IDs = document.getElementById(‘VariantProduct_IDs’).value
aryVariantProduct_IDs = strVariantProduct_IDs.split(‘,’)

var VariantProductOptions_IDs
VariantProductOptions_IDs = “”
for (i=0;i<aryVariantProduct_IDs.length;i++){
VariantProductOption_ID = document.getElementById(“VariantProductOption_ID” + aryVariantProduct_IDs[i]).value

mod = document.getElementById(“PriceMod” + VariantProductOption_ID).value
curTotalPriceOfVariants = curTotalPriceOfVariants + parseFloat(mod)

mod = document.getElementById(“PartMod” + VariantProductOption_ID).value
curTotalPartMod = curTotalPartMod + mod

VariantProductOptions_IDs = VariantProductOptions_IDs + “,” + VariantProductOption_ID

//mod = document.getElementById(“MfgPartMod” + VariantProductOption_ID).value
//curTotalMfgPartMod = curTotalMfgPartMod + mod

}

document.getElementById(‘VariantProductOptions’).value = VariantProductOptions_IDs
Discount = document.getElementById(‘discountPercentage’).value
NewPrice = parseFloat(ListPrice) + (parseFloat(curTotalPriceOfVariants) * parseFloat(Discount))

if(document.getElementById(‘strStrikePrice’)){

document.getElementById(‘strStrikePrice’).innerHTML = formatCurrency(parseFloat(StrikePrice) + parseFloat(curTotalPriceOfVariants))

document.getElementById(‘ProdDisc65’).value = formatCurrency(NewPrice)
document.getElementById(‘strProdPrice’).value = formatCurrency(parseFloat(StrikePrice) + parseFloat(curTotalPriceOfVariants))

}else{
document.getElementById(‘strProdPrice’).value = formatCurrency(NewPrice)

}

NewMFGPartNumber = document.getElementById(‘strProductMFGPartNumber’).innerHTML //+ curTotalMfgPartMod
//document.getElementById(‘strProductMFGPartNumber’).innerHTML = formatCurrency(NewMFGPartNumber)
NewPartNumber = document.getElementById(‘strProductPartNumberBase’).value + curTotalPartMod

document.getElementById(‘strProductPartNumber’).innerHTML = NewPartNumber

document.getElementById(‘PartNum’).value = NewPartNumber
document.getElementById(‘MFGPartNum’).value = NewMFGPartNumber

document.getElementById(‘strRealPrice’).innerHTML = ‘$’ + formatCurrency(NewPrice)

try{
changeQtyDisplayBox(NewPrice)
}catch(e){
}
}

function numberorder(a,b){return a – b;}

changePriceValue()

</script>[/code]

PLEASE
LEASE
EASE
ASE
SE
EEEEEE

HELP ME!!

to post a comment
JavaScript

16 Comments(s)

Copy linkTweet thisAlerts:
@bathurst_guyDec 05.2005 — Sorry in your rush I think you forgot to ask a question, or at least explain.
Copy linkTweet thisAlerts:
@Lotus9authorDec 05.2005 — Oh hey,

Whoooa, I think I did forget to mention it. Well, I need that .js in the first post to work with a radio button layout(also in the first post) The .js is currently setup to function with a select(drop down) and I was told that I need to make a for() for this script so that it can cycle through and pick up which radio button is checked on each variant? That make sense?

Thanks so much for the reply.
Copy linkTweet thisAlerts:
@bathurst_guyDec 05.2005 — Ok, i still dont completely understand and not all the code is there

from what i figure you want to return the value of the radio once it has been clicked on, correct?

&lt;input type="radio" name="VariantProductOption_ID" id="VariantProductOption_ID3" value="6" onclick="alert(this.value);"&gt;

The above code does that.

Now, a note, do you know what ID means? Its to identify a single element from all the others, so, giving two things the same ID is incorrect code. It will return the first of the ID that it finds.
Copy linkTweet thisAlerts:
@Lotus9authorDec 05.2005 — Hello,

Thanks so much for writing. Ok, here's the deal. I already have all the products listed in a database with values and prices all set. I can display them on my site via drop down boxes, but there is no option in the admin panel on the backend to display them as radio buttons, so I am trying to go in and manually change the drop downs to radio buttons. The drop down codes I listed above, are the actual ones I am using. I have the ID's, Name's and Value's, however, there is also a .js on the product page that works to change the price on screen depending on what variants are choosen. I think the .js also tells the shopping cart which selections have been made. So, I need to get this javascript to function with a radio button layout.

Here are a few answers I have been given:

Instead of document.getElementById(), use document.getElementsByName() and then use a for() loop to check which one is checked.

you need to call the changePriceValue() function in onClick handler for your radiobuttons, and modify that function so that it determines the currently chosen element from radio buttons, not from drop-down list.

Someone else told me to use different ID's on each selection, but isn't that used in conjunction with the value? How will the .js know which option(variant) the value is referencing in order to get the pricechange?

Thanks.
Copy linkTweet thisAlerts:
@bathurst_guyDec 05.2005 — what if you change this line to this
VariantProductOption_ID = document.getElementByName("VariantProductOption_ID" + aryVariantProduct_IDs[i]).value
and completely remove the id 's from the radios, eg
&lt;label&gt;
&lt;input type="radio" name="VariantProductOption_ID3" value="6"&gt;
17" 1680 x 1050 UltraPix WSXGA+ Glassview LCD&lt;/label&gt;
&lt;br&gt;
&lt;label&gt;
&lt;input type="radio" name="VariantProductOption_ID3" value="7"&gt;
17" 1920 x 1200 UltraPix WUXGA+ w/ GlassView LCD [ADD $150.00]&lt;/label&gt;

what does this do
Copy linkTweet thisAlerts:
@bathurst_guyDec 05.2005 — actually does getElementByName even exist as a function? Ive heard of getElementByID and getElementByTagName
Copy linkTweet thisAlerts:
@FangDec 05.2005 — Are you getting the selected radio:&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;form&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
function changePriceValue()
{
var vpoID=document.getElementsByName('VariantProductOption_ID')
for (i=0;i&lt;vpoID.length;i++){
if(vpoID[i].checked){
VariantProductOption_ID = vpoID[i].value;
alert(VariantProductOption_ID);
}
}
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form action="#" name="form1"&gt;
&lt;fieldset&gt;

<i> </i>&lt;legend&gt;Display&lt;/legend&gt;

<i> </i>&lt;ul&gt;
<i> </i> &lt;li&gt;
<i> </i> &lt;label&gt;
<i> </i> &lt;input type="radio" name="VariantProductOption_ID" value="6" onclick="changePriceValue()"&gt;
<i> </i> 17" 1680 x 1050 UltraPix WSXGA+ Glassview LCD
<i> </i> &lt;/label&gt;
<i> </i> &lt;/li&gt;

<i> </i> &lt;li&gt;
<i> </i> &lt;label&gt;
<i> </i> &lt;input type="radio" name="VariantProductOption_ID" value="7" onclick="changePriceValue()"&gt;
<i> </i> 17" 1920 x 1200 UltraPix WUXGA+ w/ GlassView LCD [ADD $150.00]
<i> </i> &lt;/label&gt;
<i> </i> &lt;/li&gt;
<i> </i>&lt;/ul&gt;


&lt;/form&gt; &lt;/fieldset&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@Lotus9authorDec 05.2005 — Hey Fang,

Thanks so much for your input. But, I am getting errors on the page when I paste that in. I leave the other .js (in my first post) on the page, right? This script uses a byname, whereas the .js above is still using a byid, is that a problem?

Thanks.
Copy linkTweet thisAlerts:
@Lotus9authorDec 05.2005 — Hey Bathurst,

Skipped right over your replies, Wow, you guys are fast. :-) But, where do I put this:

VariantProductOption_ID = document.getElementByName("VariantProductOption_ID" + aryVariantProduct_IDs[i]).value



I thought what I was suppose to do is change all the getbyid in the .js to getbyname, then take out the ID for each selection, and create a for() to check which radio is selected, no?



Thanks
Copy linkTweet thisAlerts:
@FangDec 05.2005 — This would have to be indexed and would not work for all selections:VariantProductOption_ID = document.getElementByName("VariantProductOption_ID" + aryVariantProduct_IDs[i])[COLOR=Green][index][/COLOR].value

The code I gave was an example of validating a radio group, not a solution for your problem. You would have to make an extra check for the radio group (aryVariantProduct_IDs[i]==3) and apply the code.
Copy linkTweet thisAlerts:
@Lotus9authorDec 05.2005 — Hey Guys,

OK, maybe I should explain, that I don't know ANYTHING about javascript, so whenever you try to explain something it sounds like Greek to me. :-)

Is there anyway you can paste in some code to show what all this might look like. Because, I will never be able to get this going by myself.

Thanks so much.
Copy linkTweet thisAlerts:
@FangDec 05.2005 — Not without seeing the complete document or link.
Copy linkTweet thisAlerts:
@Lotus9authorDec 05.2005 — Hey,

Thanks so much for writing. I had to attach a .txt because the code is TOO big.

Also, there is another .js on the page, that I use to expand/contract content. You can see that it contains a getelementbyID as well. Could that be interferring?

If you could help me get this working, it would only be like a CHRISTMAS MIRACLE! ?

[upl-file uuid=169a72dd-79f1-4b33-b3f9-3e8952f20ab5 size=48kB]variantcode.txt[/upl-file]
Copy linkTweet thisAlerts:
@Lotus9authorDec 06.2005 — Hey Fang,

Did you get a chance to look at the entire code?

Thanks
Copy linkTweet thisAlerts:
@FangDec 06.2005 — The second [I]function changePriceValue()[/I] must be removed!
for (i=0;i&lt;aryVariantProduct_IDs.length;i++){
[COLOR=Green]if(aryVariantProduct_IDs[i]==3) { // the radio group
var vpoID=document.getElementsByName('VariantProductOption_ID3');
for (i=0;i&lt;vpoID.length;i++) {
if(vpoID[i].checked) {
VariantProductOption_ID = vpoID[i].value;
}
}
}
else { // all selects
VariantProductOption_ID = document.getElementById("VariantProductOption_ID" + aryVariantProduct_IDs[i]).value
}[/COLOR]
mod = document.getElementById("PriceMod" + VariantProductOption_ID).value
curTotalPriceOfVariants = curTotalPriceOfVariants + parseFloat(mod)
mod = document.getElementById("PartMod" + VariantProductOption_ID).value
curTotalPartMod = curTotalPartMod + mod
VariantProductOptions_IDs = VariantProductOptions_IDs + "," + VariantProductOption_ID
There does appear to be errors in the original code/html; elements that are referenced, but do no exist.

The validation code is overly complex and should be rewritten, which would mean all the hidden inputs could be removed.

None of the 21 tables are necessary, replace with css
Copy linkTweet thisAlerts:
@Lotus9authorDec 07.2005 — Hey Fang,

I just want to say a BIG thanks for taking the time to even look at my problem, but again...man, you will have to be more clear than that. I don't have any idea what to do based upon your last post.

Can someone PLEASE, just show me like I am A 2 YEAR OLD, what I need to change in order to get this working with the radio buttons.

The .js and hidden inputs must stay, ignore the html errors, I just want the javascript to pick up radio inputs instead of select drop downs.

Thanks very much.
×

Success!

Help @Lotus9 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.19,
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,
)...