CODEWITHSUNDEEP
javascripthtml
Steven Yu
Steven Yu

Reputation: 155

Create auto calculation by JavaScript

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

Upvotes: 0

Views: 270

Answers (2)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

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.

Upvotes: 1

Jelle Bruisten
Jelle Bruisten

Reputation: 441

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?

Upvotes: 1

Related Questions