使用 Jquery 在 PHP 中使用 HTML 表单求和答案

【问题标题】：Sum in PHP with HTML Form using Jquery使用 Jquery 在 PHP 中使用 HTML 表单求和
【发布时间】：2015-04-23 04:39:50
【问题描述】：

我是 jquery 的新手，想创建一个非常简单的页面来学习一下。我正在尝试制作一个将其值发送到 php 的表单。 php 求和并返回结果。 Jquery 在页面中动态显示它。

这是我的 html 和 javascript：

<html> 
<head> 
<title>null</title> 

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

$("form1").change(function() { 

$.get("requisit.php", {a1: $("#a1").html(), a2: $("#a2").html()}, 

function(data) { 

$(".results").empty().html(data); 

}); 

return false; 
}); 
}); 
</script> 

</head> 
<body>         

<form name="form1"> 
<input type="text" name="a11" id="a1"><br/>
<input type="text" name="a22" id="a2">
</form> 

<div class="results"> 
The answer is: 
</div> 
</div> 
</body> 
</html>

这是我的 php：

<?php 
$a1 = $_GET['a1']; 
$a2 = $_GET['a2']; 

$sasa = $a1+$a2; 
echo $sasa; 
?>

AJAX 未显示结果。那是我的问题。我正在尝试让 AJAX 检测任何修改并显示结果，但它不起作用，我不知道为什么。

谢谢！

【问题讨论】：

你在哪里挂机？ PHP 没有返回正确的结果？ AJAX 结果不显示等
@Hitoshi 你需要使用.val()方法来获取字段的值，而不是.html()
@cris85 PHP 结果正确如果你测试它。 AJAX 不显示任何内容...
@drymanz 我会试试的！谢谢！！

标签： php jquery html forms sum

【解决方案1】：

    <html> 
<head> 
<title>null</title> 

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

$(".sum").keyup(function() { 

totalamount=0;

$('.sum').each(function()
{
    if($(this).val()!=""){

    totalamount += parseFloat($(this).val());
}

});

$(".results").html(totalamount );

}); 
}); 
</script> 

</head> 
<body>         

<form name="form1"> 
<input type="text" name="a11" class="sum" id="a1"><br/>
<input type="text" name="a22" class="sum" id="a2">
</form> 

<div class="results"> 
The answer is: 
</div> 
</div> 
</body> 
</html>

你可以试试这个代码：您需要为每个 textarea 框取一个公共类并使用 $('.sum').each(function()

【讨论】：

感谢您的回答，@Vikas Umrao。在你的回答中没有使用 PHP，只有 JS。我试图让 AJAX 将数据发送到 PHP，PHP 计算并 AJAX 将其显示在页面中。如果有任何修改，AJAX 会再次检测并更改结果。