Встроенный скрипт jquery не выполняется с html

У меня есть jquery, встроенный в мою html-страницу, который принимает значение полей cgstPct и цены и вычисляет значение окончательной суммы в событии изменения поля cgstPct. На веб-странице это не работает.

Я попытался запустить jsfiddle, и он там работал, поэтому я предполагаю, что может быть проблема с тем, как я использую его в своем HTML-файле.

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

проверьте журнал консоли

— 28.05.2019 08:40

jquery html

28.05.2019 08:39

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

У вас не может быть кода внутри тега скрипта, который имеет 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>

Так должно быть

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

Спасибо за предложение. После внесения предложенного изменения пришлось также включить часть скрипта в тело, и это сработало.

— 28.05.2019 09:36

28.05.2019 08:41

Ответ принят как подходящий

Я думаю, вы забыли указать тег скрипта в своем коде. Не могли бы вы изменить структуру кода, как показано ниже.

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

И для лучшей практики всегда пишите свой код jquery или javascript внизу тег тела. Это может решить вашу проблему. Спасибо :)

28.05.2019 08:46