I would like to get the total price based on price * quantity . I need a function in order to do this. Here is currently what I'm working on right now

<head>

    <meta charset="utf=8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">

    <title>Book Ordering System</title>

<style>

 .top-bottom{

     background-color: skyblue;

 }

 .total_column{

     background-color: silver;

 }

 .all:hover{

     background-color: yellow;

 }

 td .align-right input {

text-align: right;

}

</style>

</head>

<body>

    <script>

        function calculateTotal(event){

         event.preventDefault();

         let unit_price = document.getElementById("sec1.2");

         let quantity=document.getElementById("sec1.3");

         document.getElementById("sec1.4").innerHTML = unit_price * quantity;

        }

    </script>

    <h1>Book Ordering System</h1>

    <table border="2">

        <form method="post">

        <tr style="font-weight:bold" ; class="top-bottom all" >

            <td>No.</td>

            <td>Book Title</td>

            <td>Author</td>

            <td>Category</td>

            <td style="text-align: right;">Unit Price</td>

            <td style="text-align: right;">Quantity</td>

            <td style="text-align: right;">Total</td>

        </tr>

        <tr class="all">

        <td>1</td>

        <td>

            <label for="sec1"></label>

          <input type="text" name="sec1" id="sec1" value=""/>

        </td>

        <td>

            <label for="sec1.1"></label>

            <input type="text" name="sec1.1" id="sec1.1" value=""/>

        </td>

        <td>

            <select name="category" id="category">

            <option value="choose">Please choose the category...</option>

            <option value="biz">Business</option>

            <option value="fiction">Fiction</option>

            <option value="maths">Mathematics</option>

            <option value="tech">Technology</option>

            </select>

        </td> 

        <td>

            <div class="align-right">

            <label for="sec1.2"></label>

            <input type="text" name="sec1.2" id="sec1.2" value="0.00"/>

            </div>

        </td>

        <td>

            <div class="align-right">

            <label for="sec1.3"></label>

            <input type="text" name="sec1.3" id="sec1.3" value="0"/>

            </div>

        </td>

        <td>

            <div class="align-right">

            <label for="sec1.4"></label>

            <input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />

            </div>

        </td>

        </tr>

        <tr class="all">

            <td>2</td>

            <td>

                <label for="sec1"></label>

              <input type="text" name="sec1" id="sec1" value=""/>

            </td>

            <td>

                <label for="sec1.1"></label>

                <input type="text" name="sec1.1" id="sec1.1" value=""/>

            </td>

            <td>

                <select name="category" id="category">

                <option value="choose">Please choose the category...</option>

                <option value="biz">Business</option>

                <option value="fiction">Fiction</option>

                <option value="maths">Mathematics</option>

                <option value="tech">Technology</option>

                </select>

            </td> 

            <td>

                <div class="align-right">

                <label for="sec1.2"></label>

                <input type="text" name="sec1.2" id="sec1.2" value="0.00"/>

                </div>

            </td>

            <td>

                <div class="align-right">

                <label for="sec1.3"></label>

                <input type="text" name="sec1.3" id="sec1.3" value="0"/>

                </div>

            </td>

            <td>

                <div class="align-right">

                <label for="sec1.4"></label>

                <input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column " />

                </div>

            </td>

            </tr>

            <tr class="all">

                <td>3</td>

            <td>

                <label for="sec1"></label>

              <input type="text" name="sec1" id="sec1" value=""/>

            </td>

            <td>

                <label for="sec1.1"></label>

                <input type="text" name="sec1.1" id="sec1.1" value=""/>

            </td>

            <td>

                <select name="category" id="category">

                <option value="choose">Please choose the category...</option>

                <option value="biz">Business</option>

                <option value="fiction">Fiction</option>

                <option value="maths">Mathematics</option>

                <option value="tech">Technology</option>

                </select>

            </td> 

            <td>

                <div class="align-right">

                <label for="sec1.2"></label>

                <input type="text" name="sec1.2" id="sec1.2" value="0.00"/>

                </div>

            </td>

            <td>

                <div class="align-right">

                <label for="sec1.3"></label>

                <input type="text" name="sec1.3" id="sec1.3" value="0"/>

                </div>

            </td>

            <td>

                <div class="align-right">

                <label for="sec1.4"></label>

                <input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />

                </div>

            </td>

            </tr>

            <tr class="all">

                <td>4</td>

            <td>

                <label for="sec1"></label>

              <input type="text" name="sec1" id="sec1" value=""/>

            </td>

            <td>

                <label for="sec1.1"></label>

                <input type="text" name="sec1.1" id="sec1.1" value=""/>

            </td>

            <td>

                <select name="category" id="category">

                <option value="choose">Please choose the category...</option>

                <option value="biz">Business</option>

                <option value="fiction">Fiction</option>

                <option value="maths">Mathematics</option>

                <option value="tech">Technology</option>

                </select>

            </td> 

            <td>

                <div class="align-right">

                <label for="sec1.2"></label>

                <input type="text" name="sec1.2" id="sec1.2" value="0.00"/>

                </div>

            </td>

            <td>

                <div class="align-right">

                <label for="sec1.3"></label>

                <input type="text" name="sec1.3" id="sec1.3" value="0"/>

                </div>

            </td>

            <td>

                <div class="align-right">

                <label for="sec1.4"></label>

                <input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />

                </div>

            </td>

            </tr>

            <tr class="all">

                <td>5</td>

            <td>

                <label for="sec1"></label>

              <input type="text" name="sec1" id="sec1" value=""/>

            </td>

            <td>

                <label for="sec1.1"></label>

                <input type="text" name="sec1.1" id="sec1.1" value=""/>

            </td>

            <td>

                <select name="category" id="category">

                <option value="choose">Please choose the category...</option>

                <option value="biz">Business</option>

                <option value="fiction">Fiction</option>

                <option value="maths">Mathematics</option>

                <option value="tech">Technology</option>

                </select>

            </td> 

            <td>

                <div class="align-right">

                <label for="sec1.2"></label>

                <input type="text" name="sec1.2" id="sec1.2" value="0.00"/>

                </div>

            </td>

            <td>

                <div class="align-right">

                <label for="sec1.3"></label>

                <input type="text" name="sec1.3" id="sec1.3" value="0"/>

                </div>

            </td>

            <td>

                <div class="align-right">

                <label for="sec1.4"></label>

                <input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column"/>

                </div>

            </td>

            </tr>

            <tr class="top-bottom all">

                <td colspan="5" align="right">

                 <div class="align-right" >

                 <input type="button" onclick="calculateTotal()" value="Calculate Grand Total Price">

                 </div>

                </td>

                <td colspan="2" align="right">

                <div class="align-right">

                <input type="text" name="sec3.1" id="sec3.1" value="0.00" readonly="readonly" style="background-color: silver; font-size: 18pt;"/>

                </div>

                </td>

            </tr>

            

        </form>

    </table>

</body>

Script in a form element is obtrusive. If it is loaded at the end of the body element then we can be sure the body has finished loading into the DOM.

Aside

This is fairly old code and needs some separation of concerns. That would be something on the to do list for the next iteration.

Have you validated the markup at validator.w3.org?

Something else for the to do list is names that are human readable. sec1.2 is meaningful in some respect, but not so much as the lexicon, total_column, &c.

When you get into the script we can see where the above advice comes in handy. The ids are not human readable save scrolling back up through the code to find out what they mean. A simple name would help keep everything in context.

Not a very heavy to-do, all in all. Keep us abreast of things so we can see the finished working product.

@mtf however, it still would not work. I tried keying in 25*2 and nothing happen.

Is it possible to see your revised code in the same format as above?

@mtf, what do u mean by revised code?

You’ve said it’s not working but revision suggestions have been offered. What happens after implementing those suggestions?

@mtf it is still the same and it is not working.

Was it Einstein who said that insanity is doing the same thing over an over and expecting different results? Until the code is revised we can’t know if it will work. Forget why it doesn’t work. Fix it.

@mtf so, is it just minor mistakes that I made or do I have to add something else?

No, minor. Move the script. Let us know what happens.

@mtf, done it but is still not working. I think there are more issues in this document.

Did you validate the HTML, yet? Where is the script now written? We need to see the revised code.

@mtf done the validation. there are some mistakes on HTML but that does not necessarily affect the code. I think there is something wrong with the Javascript section.

Until now I hadn’t noticed the FORM attributes, my bad. This code should run without a server-side handler so the action would be, action="" and the method attribute could be left off.

<form action="">

The results will be displayed in real time on the client side.

@mtf, the results are still the same. No changes

Time to see the code you’re running, again. Please format for posting.

@mtf, so should I send the entire code again?

Yes, please. Formatted for posting.

@mtf, I’m done with the formatting. U can go ahead and take a look at the formatted code above now.

Script at the start of the body, or before cannot hook onto page elements because they have not loaded yet. Put the script at the end of the body.

You should know that you also wasted twenty minutes of my time formatting your post by completely destroying it. I cannot help with this any longer. Stop tagging me in.

You want someone to give you a solution that is bound to be over your head but you still believe you can learn from it. Ain’t going to happen. There are concepts that you are not even aware of that are in play here. Stop playing games and go back to learning basics. Then return to this project when you actually understand the DOM.

And it would help if you learn how to post code in the forum.