Create auto calculation by JavaScript

Question

I'm doing a simple calculation by receiving the data from previous page. Here is the first page and it is sending the data after click check out.

    <script>
        function passValues() {
            var bp = document.getElementById("Amount_BP").value;
            localStorage.setItem("bp_value", bp);
            return false;
        }
    </script>
            <form action="settlement.aspx">
                <table style="width:60%";>
                    <tr>
                        <td>
                            Black pepper sauce
                            <br />
                            Amount: <input type="number" id="Amount_BP" value="0" style="margin-top: 5px" />
                        </td>
                    </tr>
                </table>
            </form>
<button type="button" class="settlement button_press" onclick="settlement(); passValues();">Check Out</button>

And the second page is the settlement so it will receive the amount from the previous page. And I want make it the calculation auto complete after receive data. The script below the table is receive data script.

            <table style="width:90%">
                <tr>
                    <th>&nbsp;</th>
                    <th>Type</th>
                    <th>Quantity</th>
                </tr>
                <tr>
                    <td><img src="Image/chicken_chop.png" style="height: 100px; width: 200px"/></td>
                    <td style="text-align: center">Black Pepper Sauce</td>
                    <td style="text-align: center"><p id="Amount_bp" onchange="autoCal(this.value)">0</p></td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td><input class="w3-input w3-border" name="tot_amount" id="total" type="text" readonly/></td>
                </tr>
            </table>

    <script>
        document.getElementById("Amount_bp").innerHTML = localStorage.getItem("bp_value");
    </script>

And the last one is my script file that I created for both

function settlement () {
    window.location.href = 'settlement.aspx';
}

function autoCal(val) {
    var tot_price = val * 14.9;
    /*display the result*/
    var divobj = document.getElementById('total');
    divobj.value = tot_price;
}

At the last, I think that it is work for me as I expect the data send to another page and it will auto calculate but it fail. I think my problem is on function autoCal(Val) that part but I can't find the mistake I made

I guess that last statement of the autoCal function is wrong. Try divobj.innerHTML instead of `divobj.value — theLibertine
– theLibertine, Commented Aug 29, 2019 at 9:47
Could you please explain the expected behavior and what is going wrong? Is the value not displaying? — theLibertine
– theLibertine, Commented Aug 29, 2019 at 9:54
The document.getElementById('total').value = tot_price is correct, but why is there a onchange on a P? — Jelle Bruisten
– Jelle Bruisten, Commented Aug 29, 2019 at 9:55
@theLibertine YA. So I expect the amount as data will send to settlement.aspx. And the settlement.aspx will received the data and auto calculate the price. But my code seems didn't auto calculate and didn't display it as well. — Steven Yu
– Steven Yu, Commented Aug 29, 2019 at 9:57

Mobeen Sarwar · Accepted Answer · 2019-08-29 10:44:36Z

1

This solution works perfect for your problem.

First Page

<html>
<head>
  <title></title>

</head>
<body>
     <form action="second.html" method="POST">
                <table style="width:60%";>
                    <tr>
                        <td>
                            Black pepper sauce
                            <br />
                            Amount: <input type="number" id="Amount_BP" value="0" style="margin-top: 5px" />
                        </td>
                    </tr>
                </table>
            </form >
<button type="button" class="settlement button_press" onclick=" testJS();"> Check Out</button>
</body>
</html>

<script>
        function testJS() {
    var b = document.getElementById('Amount_BP').value;
        url = 'file:///var/www/html/Stack/second.html';
        localStorage.setItem("bp_value", b);
        document.location.href = url;
}
</script>

Second Page

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
         <table style="width:90%">
                <tr>
                    <th>&nbsp;</th>
                    <th>Type</th>
                    <th>Quantity</th>
                </tr>
                <tr>
                    <td></td>
                    <td style="text-align: center">Black Pepper Sauce</td>
                    <td style="text-align: center"><p id="Amount_bp" onchange="autoCal(this.value)">0</p></td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td><input class="w3-input w3-border" name="tot_amount" id="total" type="text" readonly/></td>
                </tr>
            </table>

    <script>
        document.getElementById("Amount_bp").innerHTML = localStorage.getItem("bp_value");
    </script>
</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        console.log("hello");
        var tot_price = localStorage.getItem("bp_value") * 14.9;
    /*display the result*/
    var divobj = document.getElementById('total');
    divobj.value = tot_price;
}
</script>

Please let me know if this is not working.

edited Aug 29, 2019 at 10:44

Mobeen Sarwar

5245 silver badges23 bronze badges

answered Aug 29, 2019 at 10:18

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

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

3 Comments

Steven Yu Over a year ago

Owhh. It's work! Thank you. I found out where the problem is. I should use the data from the localStorage in the script right?

Pushprajsinh Chudasama Over a year ago

Yes exactly @JohnLee

Steven Yu Over a year ago

Thank you! You help me a lot!

Jelle Bruisten · Accepted Answer · 2019-08-29 10:14:51Z

I made this quick:

first page:

<script>
        function passValues() {
            var bp = document.getElementById("Amount_BP").value;
            localStorage.setItem("bp_value", bp);
            return false;
        }

function settlement () {
    window.location.href = 'index2.html';
}       
    </script>
            <form action="settlement.aspx">
                <table style="width:60%";>
                    <tr>
                        <td>
                            Black pepper sauce
                            <br />
                            Amount: <input type="number" id="Amount_BP" value="0" style="margin-top: 5px" />
                        </td>
                    </tr>
                </table>
            </form>
<button type="button" class="settlement button_press" onclick="settlement(); passValues();">Check Out</button>

and the second page:

    <table style="width:90%">
                <tr>
                    <th>&nbsp;</th>
                    <th>Type</th>
                    <th>Quantity</th>
                </tr>
                <tr>
                    <td><img src="Image/chicken_chop.png" style="height: 100px; width: 200px"/></td>
                    <td style="text-align: center">Black Pepper Sauce</td>
                    <td style="text-align: center"><input type="number" id="Amount_bp" onchange="autoCal(this.value)" value="0"/></td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td><input class="w3-input w3-border" name="tot_amount" id="total" type="text" readonly/></td>
                </tr>
            </table>

    <script>
        document.getElementById("Amount_bp").value = localStorage.getItem("bp_value");
        document.getElementById("total").value = localStorage.getItem("bp_value") * 14,9;
function autoCal(val) {
    var tot_price = val * 14.9;
    console.log(tot_price);
    /*display the result*/
    var divobj = document.getElementById('total');
    divobj.value = tot_price;
}       
</script>

Is that what you wanted?

YA! It is work as I add this line document.getElementById("total").value = localStorage.getItem("bp_value") * 14,9;
Btw Both of your answer and another answer are work for me!! Thanks for your kind reply.

Collectives™ on Stack Overflow

Create auto calculation by JavaScript

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related