how to refresh a specific DIV in the same page

php jquery html

122 观看

1回复

5 作者的声誉

I am currently working on this project , which is required for the user to input financial values to calculate the total , I have been able to make an html form , and then php program to calculate and output the total.

Now the thing i want to know is how can i make the the div with id - total to refresh each time the refresh button for that function is clicked , without refreshing the whole page , so that if the user changes a number , the total shows always the correct value. that is , i want the div --> total to update upon click while other entered details are kept intact

Here is my code:

<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>
作者: Christopher 的来源 发布者： 2017 年 12 月 27 日

回应 1

0像

387 作者的声誉

决定

Try a JS calculation on jsFiddle

<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>
作者: Phil795 发布者: 2017 年 12 月 27 日
32x32