embedded jquery script not executing with html

Question

I have a jquery embedded in my html page which takes the value of cgstPct and price fields and calculates the value of the final amount on the change event of cgstPct field. On the web page this does not work.

I tried running on jsfiddle and it worked there so I assume there might be a problem with how I'm using it in my HTML file.

<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
        <title>Create Product</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        $('#cgstPct').change(function() {
            var pct = parseFloat($(this).val());
            var price = parseFloat($('#price').val());
            var total = (price) * (pct/100);
            $('#finalAmount').val(total.toFixed(2));
        });
        </script>
    </head>
    <body>
        <div layout:fragment="content" class="row">
            <div class="col-xs-8 col-md-8">
                <h3>
                    <a href="/product" class="btn btn-lg btn-primary"><span class="glyphicon glyphicon-list"></span> Product</a>
                </h3>
                <h2>Create Product</h2>
                <form action="/save">
                    <div class="form-group">
                        <label for="email">Product Name:</label>
                        <input type="text" class="form-control" name="prodName" />
                    </div>
                    <div class="form-group">
                        <label for="email">Product Description</label>
                        <textarea class="form-control" name="prodDesc" cols="60" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="email">Product Price</label>
                        <input type="number" id="price" class="form-control" name="prodPrice" />

                    <label for="cgstPct">CGST PCT</label>
                    <input type="number" id="cgstPct" class="form-control" name="cgstPct" />

                    <label for="finalAmount">Amount after GST</label>
                    <input type="number" readonly="readonly" id="finalAmount" class="form-control" name="finalAmount" />

                    <button type="submit" class="btn btn-success">Save</button>
                </form>
            </div>
        </div>
    </body>
</html>

check your console log

xmaster
– xmaster

2019-05-28 06:40:56 +00:00
Commented May 28, 2019 at 6:40 — xmaster
– xmaster, Commented May 28, 2019 at 6:40

Carsten Løvbo Andersen · Accepted Answer · 2019-05-28 06:41:46Z

1

You can't have code inside a script tag that has a src.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
  $('#cgstPct').change(function() {
    var pct = parseFloat($(this).val());
    var price = parseFloat($('#price').val());
    var total = (price) * (pct/100);
    $('#finalAmount').val(total.toFixed(2));
  });
</script>

It should be

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
  $('#cgstPct').change(function() {
    var pct = parseFloat($(this).val());
    var price = parseFloat($('#price').val());
    var total = (price) * (pct/100);
    $('#finalAmount').val(total.toFixed(2));
  });
</script>

answered May 28, 2019 at 6:41

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

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

1 Comment

Siddharth Baijal Over a year ago

Thanks for the suggestion.After making the suggested change had to also include the script part in the body and it worked.

Arjun · Accepted Answer · 2019-05-28 06:46:04Z

0

I think you forget to give script tag to your code.Can you please change your code structure as per below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
        $('#cgstPct').change(function() {
            var pct = parseFloat($(this).val());
            var price = parseFloat($('#price').val());
            var total = (price) * (pct/100);
            $('#finalAmount').val(total.toFixed(2));
        });
 </script>

And for better practice always write your jquery or javascript code at bottom of body tag. This might solve your problem .Thank you :)

answered May 28, 2019 at 6:46

Arjun

1,34217 silver badges26 bronze badges

Collectives™ on Stack Overflow

embedded jquery script not executing with html

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related