Member Avatar for mizmy

I have 5 textboxes. How to calculate the total of price entered by users? Users need to enter quantity in each textbox and then it will calculate with price that already display or show in label (quantity*price). The result will be showed in textbox readonly.
How to make it?

<pre lang="HTML">
<pre><!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.form-input {
    font-size: 13px;
    box-sizing: border-box;
    width: 17%;
    height: 23px;
    padding-left: 2px;
    padding-right: 2px;
    color: #333333;
    text-align: center;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    background: white;
    outline: none;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h2> Product </h2>

<table>
  <tr>
    <th> Item </th>
    <th> Part Number </th>
    <th> Part Name </th>
    <th> Quantity </th>
    <th> Price (USD) </th>
    <th> Total (USD) </th>
  </tr>

       <tr>
                    <th> 1 </th>
                    <th> 485-3AB</th>
                    <th> Light ring </th>
                    <th> <asp:TextBox ID="txtbox1" runat="server" class="form-input"></asp:TextBox> </th>
                    <th>  <asp:Label ID="Label1" runat="server" Text="16.30"></asp:Label> </th>
                    <th  rowspan="2">  <asp:TextBox ID="txtTotal1" runat="server" class="form-input" ReadOnly="true"></asp:TextBox> </th>
                </tr>

               <tr>
                    <th> 456-2AA </th>
                    <th> Lens </th>
                    <th><asp:TextBox ID="txtbox2" runat="server" class="form-input"></asp:TextBox></th>
                    <th><asp:Label ID="Label2" runat="server" Text="0.29"> </asp:Label> </th>
                </tr>

                <tr>
                    <th> 2 </th>
                    <th> 985-BB</th>
                    <th> Charger </th>             
                    <th> <asp:TextBox  ID="txtbox3" runat="server" class="form-input"></asp:TextBox> </th>
                    <th> <asp:Label ID="Label3" runat="server" Text="6.50"></asp:Label> </th>
                    <th> <asp:TextBox ID="txtTotal2" runat="server" class="form-input" ReadOnly="true"></asp:TextBox> </th>
                </tr>

                <tr>
                    <th> 3 </th>
                    <th> 785-NM </th>
                    <th> Light Ring 3xl </th>
                    <th> <asp:TextBox  ID="txtbox4" runat="server" class="form-input"></asp:TextBox> </th>
                    <th>  <asp:Label ID="Label4" runat="server" Text="20.50"></asp:Label> </th>
                    <th>  <asp:TextBox ID="txtTotal3" runat="server" class="form-input" ReadOnly="true"></asp:TextBox> </th>
                </tr>

                 <tr>
                    <th> 4 </th>
                    <th> M5-133 </th>
                    <th> Cable Type A </th>
                    <th> <asp:TextBox ID="txtbox5" runat="server" class="form-input"></asp:TextBox> </th>
                    <th> <asp:Label ID="Label5" runat="server" Text="3.10"></asp:Label> </th>
                    <th> <asp:TextBox ID="txtTotal4" runat="server" class="form-input" ReadOnly="true"></asp:TextBox> </th>
                </tr>

                <tr>
                    <th> 5 </th>
                    <th> M5-658 </th>
                    <th> Cable Type C </th>
                    <th> <asp:TextBox  ID="txtbox6" runat="server" class="form-input"></asp:TextBox> </th>
                    <th> <asp:Label ID="Label6" runat="server" Text="3.90"></asp:Label> </th>
                    <th> <asp:TextBox ID="txtTotal5" runat="server" class="form-input" ReadOnly="true"></asp:TextBox> </th>
                </tr>

            <asp:Button ID="Submitbtn" runat="server" Text="Submit" OnClick="Submitbtn_Click" />  
        </div>
    </form>
</body>
</html>
Edited by mizmy
  • 3 Contributors
  • 2 Replies
  • 128 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by john_111
Member Avatar for pritaeas

Do you want to use Javascript/jQuery to do the (live) calculation, or rather something else?

Member Avatar for john_111

https://www.javatpoint.com/html-output-tag

<!DOCTYPE html>  
<html>  
<head>  
<title>Output Tag</title>  
</head>  
<body>  
 <p>Calculate the Sum of the two Numbers</p>  
 <form oninput="res.value=parseInt(a.value)+parseInt(b.value);">  
    <label>Enter First Value.</label><br>  
    <input type="number" name="a" value=""/><br>  
    +<br/>  
    <label>Enter First Value.</label><br>   
    <input type="number" name="b" value=""><br>  
    =<br>  
    Output is:<output name="res"></output>  
 </form>  
</body>  
</html>

I never knew this was possible!

You will have to modify your form of course.

But this is the sort of thing best done by using PHP rather than HTML.

Edited by john_111
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.