Forum Moderators: open
I think it's pretty simple javascript/ajax. I just want a few questions with radio buttons. When the option is clicked it will update the price without refresh and change the price options on the other radios.
IE:
A:
[_] Option 1 [-$50]
[X] Option 2 [included in price]
[_] Option 3 [+$50]
[_] Option 4 [+$100]
B:
[_] Option 1 [-$50]
[_] Option 2 [-$100]
[X] Option 3 [included in price]
[_] Option 4 [+$50]
Total: $250
like I said I've been trying and the only real things I can find use select options and load the prices in text fields, I don't want a pull down menu and would like them to load as just a <span>.
thanks a lot for any help on the subject.
-Mike
Also when I try to make the numbers add up use (Math) I get the results as 100100100 instead of 300, I do (amount + amount2 + amount3) * 1 and the amount = getResult("result").value
-FM-
<script>function calculate()
{
var formPrices = new Array();
var formTypes = new Array();
var formFields = document.myform.elements;
var thePriceField = document.getElementById("price");
var calculation = thePriceField.innerHTML = 0;
var i = 0;
for (var f = 0; f < formFields.length; f++)
{
if (formFields[f].className == 'calculation' && formFields[f].type == 'radio' && formFields[f].checked)
{
if (formFields[f].value)
{
formPrices[i] = formFields[f].value;
formTypes[i] = formFields[f].getAttribute("ptype");
i++;
}
}
}for (var i = 0; i < formPrices.length; i++)
calculation += (formTypes[i] + formPrices[i]);
var overalCalculation = eval(calculation);if (overalCalculation <= 0)
overalCalculation = 0;
thePriceField.innerHTML = overalCalculation;
}</script>
<form name="myform">
<h3>Question A</h3>
<input onClick="calculate();" name="price1" type="radio" ptype="+" value="100" class="calculation"> + 100<br />
<input onClick="calculate();" name="price1" type="radio" ptype="-" value="200" class="calculation"> - 200<br />
<input onClick="calculate();" name="price1" type="radio" ptype="-" value="300" class="calculation"> - 300<br />
<input onClick="calculate();" name="price1" type="radio" ptype="+" value="400" class="calculation"> + 400<br /><br />
<h3>Question B</h3>
<input onClick="calculate();" name="price2" type="radio" ptype="+" value="500" class="calculation"> + 500<br />
<input onClick="calculate();" name="price2" type="radio" ptype="+" value="600" class="calculation"> + 600<br />
<input onClick="calculate();" name="price2" type="radio" ptype="-" value="700" class="calculation"> - 700<br />
<input onClick="calculate();" name="price2" type="radio" ptype="+" value="800" class="calculation"> + 800<br /><br /></form>
<h2>Total: £<span id="price">0</span></h2>
I guess there is a much more simplified way of doing this but this works none the less.
If you add the attribute ptype to the radio button and specify the calculation operator then it will use that when it calculates all totals.
It also uses a class name so that it doesn't read all elements of the form, this is a convienience really.
I hope this is what you meant.
Good luck.
Del
A:
[_] OptionName 1 [+$50]
[_] OptionName 2 [+100]
[_] OptionName 3 [+$150]
[_] OptionName 4 [+$200]
Total: $0
and when you choose say option 2 it changes as so:
A:
[_] Option 1 [-$50]
[X] Option 2 [included in price]
[_] Option 3 [+$50]
[_] Option 4 [+$100]
Total: $100
I'm mainly a PHP programmer so some of this looks similar, I really wish I knew js/ajax. Thanks, like I said that's a good start for what I'm trying, better help then any tutorials or codes I have found yet.
Thanks,
-Mike
function np()
{
var formPrices2 = new Array();
var formFields2 = document.myform.elements;
var formID = new Array();
var x = 0;
for (var t = 0; t < formFields2.length; t++)
{
var formID[t] = document.getElementById(t);
if (formFields2[t].className == 'calculation' && formFields2[t].type == 'radio')
{
if (formFields2[t].value)
{
formPrices2[x] = formFields2[t].value;
x++;
}
}
}for (var r = 0; r < formID; r++)
{
for (var y = 0; y < formTypes2.length; y++)
{
var calc2 = (formPrices2[y] - formPrices2[r]);
var overcalc2 = eval(calc2);
formID[y].innerHTML = overcalc2;
}
}
}
<input onClick="calculate(); np();" name="price1" type="radio" ptype="+" value="100" class="calculation"> Option 1 [+<span id="1">100</span>] <br />
this does absolutely nothing. I was trying to have it take the radio you click -+ other prices to make the new price, but no luck, I'm sure this is off key as well and not close to what it is supposed to be..
The reason it is easier is because as far as i know there is no way of getting the default / original value of the span once you have set the value, but with an input field you can use "defaultValue" and get the original value with ease.
If you still want to use a span then this could be done by caching the default value in javascript and then setting the value once the items have changed.
Let me know what you think and i will adapt on my previous post.
Thanks for being patient with me.
Del
If you have any problems, please let me know.
Thank you,
Del
