dqsp60748
2017-12-27 16:47
浏览 86

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

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • duankuan5319 2017-12-27 16:57
    已采纳

    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>
    
    点赞 打赏 评论

相关推荐 更多相似问题