how to refresh a specific DIV in the same page
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 日
来自类别的问题 :
- php 你如何调试PHP脚本?
- php 在Htdocs之外创建XAMPP / Apache服务文件
- php 如何包含需要绝对路径的PHP文件?
- php 带隐藏按钮的登录脚本
- php 如何在PHP项目中找到未使用的函数
- php 在PHP中高效调整JPEG图像大小
- jquery 使用JavaScript滚动溢出的DIV
- jquery 使用jQuery转义HTML字符串
- jquery 如何将html实体与jQuery进行比较
- jquery jQuery是否存在“存在”功能?
- jquery How do you remove all the options of a select box and then add one option and select it with jQuery?
- jquery 获取触发事件的元素的ID
- html 如何检测网页中使用了哪一个定义的字体?
- html 如何为我的网站提供iPhone的图标?
- html 如何在Web表单字段/输入标记上禁用浏览器自动完成?
- html 如何使用Prototype自动调整textarea?
- html 如何定制有序列表中的数字?