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>
2 answers
solution1
1 2019-05-28 06:41:46
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>
solution2
0 ACCPTED 2019-05-28 06:46:04
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 :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.