ansaurus

Question

Javascript drop-down form math calculation

Answer 1

+1 A:

Maybe you are looking for something like this:

You need to access the value property in those objects:

var price = sqBn.value * Amt.value * 0.2;

EDIT: Here's a version that updates the value of an input box with the price: http://jsfiddle.net/JSvSn/5/

EDIT 2: Show price in a div.

quantumSoup 2010-07-19 03:18:26

Thank you, that worked. How do I make the value appear without the page refreshing? Like adding it below the form rather than it being the only thing when the button is pressed?

Andrei Korchagin 2010-07-19 03:22:45

you can use onchange or onselect event of the select list to run your calculation.

James Lin 2010-07-19 03:28:06

onchange works halfway the way I want it, but it still keeps refreshing the page to show the value returned rather than outputting it after the form.

Andrei Korchagin 2010-07-19 05:24:34

@Andrei Read updated post ^

quantumSoup 2010-07-19 06:06:24

.value for select boxes doesn't work across browsers

bluesmoon 2010-07-19 06:38:03

@bluesmoon It does when you have a value for each option element. I tested it on Safari, Chrome and FF. Can't do IE though, I am on OS X

quantumSoup 2010-07-19 07:06:16

@Aircule Thanks so much, that's almost perfect. Just one last thing, is there a way I could output the number without it being in an input box like that? Like just as a plain number as far as the user is concerned?

Andrei Korchagin 2010-07-19 18:43:44

@Andrei : yes, see edit

quantumSoup 2010-07-19 19:18:41

@Aircule: IE is where it doesn't work.

bluesmoon 2010-07-19 19:48:18

@bluesmoon: Just tested on IE8, and it works fine.

quantumSoup 2010-07-19 20:26:01

@Aircule Thanks again!

Andrei Korchagin 2010-07-19 21:35:38

what about IE6?

bluesmoon 2010-07-20 22:38:44

@bluesmoon Honestly I have no clue. I had IE6 installed at some point, but it's gone.

quantumSoup 2010-07-20 22:41:05

Answer 2

+1 A:

I'm not sure if the sqBn.value will work on all browsers. It would be safer to use

sqBn.options[sqBn.selectedIndex].value

and if you are still getting NaN results then try

parseInt(sqBn.options[sqBn.selectedIndex].value)

If you want to do this calculation without refreshing the page change the form declaration like this:

<form name="priceCalc" action="priceCalcPage.html" onsubmit="document.write(price());return false;">

In this way the onsubmit will be executed, but won't submit anything to the action. If you want to submit it, you can still do it from javascript (document.priceCalc.submit()).

Zsolti 2010-07-19 06:27:40

ansaurus

tags:

views:

answers:

Javascript drop-down form math calculation

related questions