Multiplying two input variables jscript

Question

I'm trying to make a basic ROI calculator and having trouble getting any kind of math function to work. I will only require two user variable inputs and want my coding to pass through a simple math equation and post the answer. The math formula will change once I can get my two input variables to at least multiply against each other.

Upon hitting submit, no output is given and the input fields reset. Clicking reset does clear the fields. I want the input (#output) to display the answer.

I don't care about CSS or final formula at this point.

HTML Type:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="calculator.js" type="text/javascript"></script>
    <title>Calculator</title>
</head>

<body>
    <form id="calculator">
        <input type="text" id="Occupancy" name="occupancy">
        <input type="text" id="rooms" name="rooms">
        <button id="submit" type="submit" name="submit">Submit</button>
        <button id="reset" type="reset" name="reset">Reset</button>
        <input type="text" id="output" name="output">
    </form>
</body>
</html>

JavaScript code below:

// JavaScript Document
$(document).ready(function() {
    $('#calculator').submit(function() {
        var occupancy = $('#Occupancy').val();
        var rooms = $('#rooms').val();
        var output =occupancy * rooms;
        output = output.toFixed(2);
        $('#output').val(output);
    });
});

Upon hitting submit, no output is given and the input fields reset. Clicking reset does clear the fields. I want the input (#output) to display the answer. — user3148176
– user3148176, Commented Dec 31, 2013 at 3:17
Thank you. Removing the line "output=output.toFixed(2);" does not populate the answer field after submitting values. — user3148176
– user3148176, Commented Dec 31, 2013 at 3:24
@JoelCornett Because of the multiplication, typeof output evaluates to "number" and therefor toFixed() is valid in this context. — WynandB
– WynandB, Commented Dec 31, 2013 at 3:56
@Wynand Ah I see. Silent type conversions are still something I'm getting used to in js. — Joel Cornett
– Joel Cornett, Commented Dec 31, 2013 at 5:17

Olaf Dietsche · Accepted Answer · 2013-12-31 03:46:07Z

3

Your script works fine. What happens is, the script runs and calculates the result. But then, the form is submitted to the server and reloads the page.

To prevent this, you must prohibit the form from submitting to the server

$('#calculator').submit(function(evt) {
    evt.preventDefault();
    var occupancy = $('#Occupancy').val();
    var rooms = $('#rooms').val();
    var output = occupancy * rooms;
    output = output.toFixed(2);
    $('#output').val(output);
});

See JSFiddle

edited Dec 31, 2013 at 3:46

answered Dec 31, 2013 at 3:39

Olaf Dietsche

74.4k9 gold badges113 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Friedrich · Accepted Answer · 2013-12-31 03:30:27Z

0

try to change

var occupancy = $('#Occupancy').val();

to var occupancy = parseFloat($('#Occupancy').val());

and var rooms = $('#rooms').val();

to var rooms = parseFloat$('#rooms').val());

answered Dec 31, 2013 at 3:30

Friedrich

2,3302 gold badges22 silver badges43 bronze badges

1 Comment

user3148176 Over a year ago

Same results. Thank you though.

Rahul Sahu · Accepted Answer · 2013-12-31 03:48:59Z

0

Try this:

// JavaScript Document
$(document).ready(function() {
    $('#submit').click(function() {
        var occupancy = $('#Occupancy').val();
        var rooms = $('#rooms').val();
        var output =occupancy * rooms;
        output = output.toFixed(2);
        $('#output').val(output);
    });
});

answered Dec 31, 2013 at 3:48

Rahul Sahu

2841 gold badge4 silver badges15 bronze badges

1 Comment

WynandB Over a year ago

Good idea, although the form will still submit and by default, clear the value of output on page reload.

WynandB · Accepted Answer · 2013-12-31 04:15:39Z

0

If there's no requirement to submit the form:

$('#calculateButton').click(function() {
  var occupancy = $('#Occupancy').val();
  var rooms = $('#rooms').val();
  var output = +occupancy * +rooms;

  $('#output').val(output.toFixed(2));
});

edited Dec 31, 2013 at 4:15

answered Dec 31, 2013 at 3:40

WynandB

1,42716 silver badges16 bronze badges

Collectives™ on Stack Overflow

Multiplying two input variables jscript

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related