CODEWITHSUNDEEP
jqueryhtml
Siddharth Baijal
Siddharth Baijal

Reputation: 15

embedded jquery script not executing with html

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>

Upvotes: 0

Views: 156

Answers (2)

Arjun
Arjun

Reputation: 1342

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 :)

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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>

Upvotes: 1

Related Questions