52637

Javascript drop-down form math calculation

Question:

I'm trying to create a page where there are two dropdown menus, and then when the user presses submit, it calculates a price based on the data given from the dropdown menu. It needs to take either 1 or 2 from the first dropdown menu choice, multiply that by the value of the second dropdown menu choice, multiply that by 0.2, and output it when the user presses submit. I've tried to make it work but I keep getting NaN errors. Any help?

<head> <script type="text/javascript"> function price() { var sqBn = document.priceCalc.squareOrBanner; var Amt = document.priceCalc.number; var price = sqBn * Amt * 0.2; document.write(price); } </script> <form name="priceCalc" action="priceCalcPage.html" onsubmit="document.write(price())"> <div align="center"> <select name="squareOrBanner"> <option value="1">Square</option> <option value="2">Banner</option> </select> <select name="number"> <option value="250">250</option> <option value="500">500</option> <option value="750">750</option> <option value="1000">1000</option> </select> <br><input type="submit" value="Figure out pricing!"><br> </div> </form>

Answer1:

Maybe you are looking for something like this:

<a href="http://jsfiddle.net/JSvSn/1/" rel="nofollow">http://jsfiddle.net/JSvSn/1/</a>

You need to access the value property in those objects:

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

<em>EDIT:</em> Here's a version that updates the value of an input box with the price: <a href="http://jsfiddle.net/JSvSn/5/" rel="nofollow">http://jsfiddle.net/JSvSn/5/</a>

<em>EDIT 2:</em> <a href="http://jsfiddle.net/JSvSn/7/" rel="nofollow">Show price in a div.</a>

Answer2:

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()).

Recommend

  • Why isn't obj.style.left = “200px”; working in this code?
  • Tell Git to stop prompting me for conflicts when none really exist?
  • Uncaught TypeError: $(…).select2 is not a function
  • Remove changes from one element when event occurs on another element?
  • Button click event not firing in jQuery
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Jquery UI tool tip close icon
  • DomPDF {PAGE_NUM} not on first page
  • Display issues when we change from one jquery mobile page to another in firefox
  • Javascript simulate pressing enter in input box
  • HTML download movie download link
  • Updating server-side rendering client-side
  • MySQL WHERE-condition in procedure ignored
  • Change an a tag attribute in JavaScript based on screen width
  • Importing jscolor library in angular 2
  • Web-crawler for facebook in python
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • A cron job substitute?
  • How to delete a row from a dynamic generate table using jquery?
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • using HTMLImports.whenReady not working in chrome
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?