Question

我目前正在处理这个项目，用户需要输入财务值来计算总数，我已经能够制作一个html表单，然后php程序来计算并输出总数。

现在我想知道的是我如何使用id来创建div - 每次点击该功能的刷新按钮时刷新，而不刷新整个页面，这样如果用户更改了数字，总数显示总是正确的值。也就是说，我想要div - ＆gt;总计在点击时更新，而其他输入的详细信息保持不变

这是我的代码：

<form method="post" action="calc.php" autocomplete="on">

  Data : <input type="date" name="data" data-date-inline-picker="false" data-date-open-on-focus="true" placeholder="la tua risposta" /><br />
  Ricevuta(€) : <input type="number" name="ricevuta" placeholder="la tua risposta" step="any" /><br />
  * : <input type="number" name="a" placeholder="la tua risposta" step="any" /><br />
  BM(€) : <input type=number name="bm"  placeholder="la tua risposta" step="any" /><br />
  Ass/Bon(€) : <input type="number" name="ass_bon" placeholder="la tua risposta" step="any" /><br />
  Cont(€) : <input type="number" name="cont" placeholder="la tua risposta" step="any" /><br />

<div id="total">
  Total(€) :
  <?php
  $data = $_POST["data"];
  $ricevuta = $_POST["ricevuta"];
  $a = $_POST["a"];
  $bm = $_POST["bm"];
  $ass_bon =  $_POST["ass_bon"];
  $cont = $_POST["cont"];
  $total=$_POST["total"];
  $total = $_POST["bm"] + $_POST["ass_bon"] + $_POST["cont"];
  echo $total;
  ?>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#total").load("calc.php");
    });
});
</script>
<button>refresh</button>
<br>

  Note : <textarea  name="note" placeholder=" "></textarea><br />

  <input type="submit" value="Invia" />
  </form>

Answer 1

在jsFiddle

上尝试JS计算

<html>
<head></head>
<body>
    <form autocomplete="on">
      Data : <input type="date" name="data" data-date-inline-picker="false" data-date-open-on-focus="true" placeholder="la tua risposta"><br />
      Ricevuta(€) : <input type="number" name="ricevuta" placeholder="la tua risposta" step="any"><br />
      * : <input type="number" name="a" placeholder="la tua risposta" step="any"><br />
      BM(€) : <input type="number" id="bm" name="bm"  placeholder="la tua risposta" step="any"><br />
      Ass/Bon(€) : <input type="number" id="ass_bon" name="ass_bon" placeholder="la tua risposta" step="any"><br />
      Cont(€) : <input type="number" id="cont" name="cont" placeholder="la tua risposta" step="any"><br />

        <button id="calc" type="button">Calculate</button>
    </form>
    <p id="total"></p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#calc").on('click', function(){
            var bm = Number($('#bm').val());
            var ass_bon = Number($('#ass_bon').val());
            var cont = Number($('#cont').val());

            var total = bm + ass_bon + cont;

            $('#total').text(total);
        });
    });
    </script>
</body>
</html>

如何刷新同一页面中的特定DIV

1 个答案: