-3

Below, I am using this JS:

        $("input[name='AuthorizedAmount'], input[name='LessLaborToDate']").change(function () {
        var sum = parseFloat($("input[name='AuthorizedAmount']").val()).toFixed(2) - parseFloat($("input[name='LessLaborToDate']").val()).toFixed(2);
        $("input[name='Subtotal'").val(sum).toFixed(2);
    });

When I subtract AuthorizedAmount from LessLaborToDate, the number occurring for me in the Subtotal box has a lot of floating numbers past the decimal point. Below is the HTML for the boxes:

                                    <div class="box-body">

                                        <div class="row">

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Authorized Amount</label>
                                                    <div class="input-group">
                                                        <span class="input-group-addon">$</span>
                                                        <input type="number" class="form-control" name="AuthorizedAmount" min="0" max="9999999999.99" step="0.01" required>

                                                    </div>
                                                </div><!-- /.form-group -->
                                            </div><!-- /.col -->

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Less Labor to Date</label>
                                                    <div class="input-group">
                                                        <span class="input-group-addon">$</span>
                                                        <input type="number" value="0" class="form-control" name="LessLaborToDate" min="0" max="9999999999.99" step="0.01" required>
                                                    </div>
                                                </div><!-- /.form-group -->
                                            </div><!-- /.col -->

                                        </div><!-- /.row -->

                                        <div class="row">

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Subtotal</label>
                                                    <div class="input-group">
                                                        <span class="input-group-addon">$</span>
                                                        <input type="number" class="form-control" name="Subtotal" placeholder="Authorized Amount minus Less Labor to Date" min="0" max="9999999999.99" step="0.01" readonly>
                                                    </div>
                                                </div><!-- /.form-group -->
                                            </div><!-- /.col -->

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                </div>
                                            </div><!-- /.col -->

                                        </div><!-- /.row -->

                                    </div><!-- /.box-body -->

Am I doing something wrong for it to not show only 2 decimal places?

Helene
  • 83
  • 1
  • 1
  • 10

1 Answers1

1

Change this line:

//This is calling toFixed() on the value of input[name='Subtotal]
$("input[name='Subtotal'").val(sum).toFixed(2);

To this:

//This sets the value of input[name='Subtotal'] to a fixed floating point number with 2 decimal places.
$("input[name='Subtotal'").val(sum.toFixed(2));
Ryan Wilson
  • 10,223
  • 2
  • 21
  • 40