Automatic calculations

[josephman1988]

Hi,

I'm working with a form at the moment in which someone requests a product, and it autmatically give a calculation when they click an option.

Thorough explanation:
This is a DVD creation business, for personal occasions, business conferenece slideshows, school presentations etc.
For each picture they wish to use will cost them, lets say, 15p, they access the dropdown menu and tick that they want, say 30 pictures, once they select this, the calculation will automatically update and show the total price.
(15p*30p = £4.50 obviously)

However, because i am new to javascript i have ran into a problem.
I have added a code in which this happens but dont know how to add another value without resulting in te first messing up.

HTML:

HTML: Select all

<strong><u>Pictures</u></strong>
<select onchange="formCalc();" id="picquantity">
    <option value="0">None</option>
    <option value="1">1 Pictures</option>
    <option value="2">2 Pictures</option>
    <option value="3">3 Pictures</option>
    <option value="4">4 Pictures</option>
    <option value="5">5 Pictures</option>
    <option value="6">6 Pictures</option>
    <option value="7">7 Pictures</option>
    <option value="8">8 Pictures</option>
    <option value="9">9 Pictures</option>
    <option value="10">10 Pictures</option>
    <option value="11">11 Pictures</option>
    <option value="12">12 Pictures</option>
    <option value="13">13 Pictures</option>
    <option value="14">14 Pictures</option>
    <option value="15">15 Pictures</option>
    <option value="16">16 Pictures</option>
    <option value="17">17 Pictures</option>
    <option value="18">18 Pictures</option>
    <option value="19">19 Pictures</option>
    <option value="20">20 Pictures</option>
    <option value="21">21 Pictures</option>
    <option value="22">22 Pictures</option>
    <option value="23">23 Pictures</option>
    <option value="24">24 Pictures</option>
    <option value="25">25 Pictures</option>
    <option value="26">26 Pictures</option>
    <option value="27">27 Pictures</option>
    <option value="28">28 Pictures</option>
    <option value="29">29 Pictures</option>
    <option value="30">30 Pictures</option>
    <option value="31">31 Pictures</option>
    <option value="32">32 Pictures</option>
    <option value="33">33 Pictures</option>
    <option value="34">34 Pictures</option>
    <option value="35">35 Pictures</option>
    <option value="36">36 Pictures</option>
    <option value="37">37 Pictures</option>
    <option value="38">38 Pictures</option>
    <option value="39">39 Pictures</option>
    <option value="40">40 Pictures</option>
    <option value="41">41 Pictures</option>
    <option value="42">42 Pictures</option>
    <option value="43">43 Pictures</option>
    <option value="44">44 Pictures</option>
    <option value="45">45 Pictures</option>
    <option value="46">46 Pictures</option>
    <option value="47">47 Pictures</option>
    <option value="48">48 Pictures</option>
    <option value="49">49 Pictures</option>
    <option value="50">50 Pictures</option>
    <option value="51">51 Pictures</option>
    <option value="52">52 Pictures</option>
    <option value="53">53 Pictures</option>
    <option value="54">54 Pictures</option>
    <option value="55">55 Pictures</option>
    <option value="56">56 Pictures</option>
    <option value="57">57 Pictures</option>
    <option value="58">58 Pictures</option>
    <option value="59">59 Pictures</option>
    <option value="60">60 Pictures</option>
    <option value="61">61 Pictures</option>
    <option value="62">62 Pictures</option>
    <option value="63">63 Pictures</option>
    <option value="64">64 Pictures</option>
    <option value="65">65 Pictures</option>
    <option value="66">66 Pictures</option>
    <option value="67">67 Pictures</option>
    <option value="68">68 Pictures</option>
    <option value="69">69 Pictures</option>
    <option value="70">70 Pictures</option>
    <option value="71">71 Pictures</option>
    <option value="72">72 Pictures</option>
    <option value="73">73 Pictures</option>
    <option value="74">74 Pictures</option>
    <option value="75">75 Pictures</option>
    <option value="76">76 Pictures</option>
    <option value="77">77 Pictures</option>
    <option value="78">78 Pictures</option>
    <option value="79">79 Pictures</option>
    <option value="80">80 Pictures</option>
    <option value="81">81 Pictures</option>
    <option value="82">82 Pictures</option>
    <option value="83">83 Pictures</option>
    <option value="84">84 Pictures</option>
    <option value="85">85 Pictures</option>
    <option value="86">86 Pictures</option>
    <option value="87">87 Pictures</option>
    <option value="88">88 Pictures</option>
    <option value="89">89 Pictures</option>
    <option value="90">90 Pictures</option>
    <option value="91">91 Pictures</option>
    <option value="92">92 Pictures</option>
    <option value="93">93 Pictures</option>
    <option value="94">94 Pictures</option>
    <option value="95">95 Pictures</option>
    <option value="96">96 Pictures</option>
    <option value="97">97 Pictures</option>
    <option value="98">98 Pictures</option>
    <option value="99">99 Pictures</option>
    <option value="100">100 Pictures</option>
 
</select>
 
 
<input type="hidden" id="picprice" value="0.15" onBlur="formCalc();" />
 
<input type="text" id="total" value="" readonly />

javascript:

Code: Select all

 
<script type="text/javascript">
 
function formCalc() {
    var picquantity = document.getElementById('picquantity').value;
    var picprice = document.getElementById('picprice').value;
    document.getElementById('total').value = picquantity * picprice;
}
 
</script>

thanks in advance
regard,
joe.

[ukgeoff]

Don't make your price field hidden. Just make it read only so the user cannot alter it and get rid of the onblur() function.

I have added a code in which this happens but dont know how to add another value without resulting in te first messing up.

Not quite sure what you are getting at here.

Why not let the user just type in a quanity rather than have a huge long selection?

[josephman1988]

Originally Posted by ukgeoff

Why not let the user just type in a quanity rather than have a huge long selection?

Because there will be a limit on how many they can have, we have limited to only 200 photos per request.

Unless you think there is an easier way?

Thanks.

[ukgeoff]

You didn't answer my query about 'messing up', or has the first bit of my response fixed everything?

[josephman1988]

Oh, apologies.

What i mean by 'messing up' is:

Although the code provided does work in terms of calculating the value, when i try to add another dropdown box, i believed that adding the simple code to both:

javascript:

Code: Select all

function formCalc() {
    var musicquantity = document.getElementById('musicquantity').value;
    var musicprice = document.getElementById('musicprice').value;
    document.getElementById('total').value = musicquantity * musicprice;
}

HTML:

HTML: Select all

<strong><u>Pictures</u></strong>
<select onchange="formCalc();" id="musicquantity">
<option value="0">None</option>
<option value="1">1 Song</option>
<option value="2">2 Songs</option>
<option value="3">3 Songs</option>
 
</select>
 
<input type="hidden" id="musicprice" value="3.95" onBlur="formCalc();" />

The end value ends up either Nan, or doesnt show up at all.

[ukgeoff]

Include a parameter in your function call so that the function can determine which dropdown initiated it and act accordingly.

[josephman1988]

How would I do this, sorry for being a troublesome newbie but we have to start somewhere. Thanks again.

[spinal007]

function sample(parameter){ // taking in the parameter
var a = parameter + 9;
}


sample(1); // sending the parameter
// the example above will store the value 10 in variable 'a'