使用JavaScript计算值并发送给PHP


Calculate the value using JavaScript and send to PHP

本问题已经有最佳答案，请猛点这里访问。

目前我正在使用3个不同的页面，分别是HTML，JavaScript和PHP。 我已经输入了，我可以使用JavaScript计算price * quantity。

但我有这个问题：如何将计算值发送到PHP页面？

HTML：

1
2
3
4
5
6
7
number of people:<input id="quantity" name="quantity" size='5'></input>


Price:<input type='hidden' id='price' name='price' value='755'></input>
<button type="button" onclick="sum()">calculate</button>
<p id='result' name='result'>
</p>

JS：

1
2
3
4
5
6
7
8
9
10
function sum() {
  var quantity = parseInt(document.getElementById('quantity').value);

  var price = parseInt(document.getElementById('price').value);

  var total = price * quantity;

  document.getElementById('result').innerHTML = total;
  document.getElementById('result').value = total;
}

PHP：

1
2
3
4
5
<?php
  $total = $_POST['result'];

  echo"price :".$total."<br/>";
?>

我无法获得价值。 请帮忙。 谢谢。

相关讨论

尝试使用表单或Ajax发送requset。希尔就是一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
if($_POST['result']){
    $total = $_POST['result'];
    echo"price :".$total."<br/>";
}
?>  

number of people: <input id="quantity" name="quantity" size='5'>            
Price: <input type='hidden' id='price' name='price' value='755'>            
<button type="button" onclick="sum()">calculate</button>            
<p id='result' name='result'>
</p>

    function sum() {
        var quantity = parseInt(document.getElementById('quantity').value);
        var price = parseInt(document.getElementById('price').value);
        var total = price * quantity;
        document.getElementById('result').innerHTML=total;
        document.getElementById('result').value=total;
        //Ajax
        var http = new XMLHttpRequest();
        var url ="test2.php" ;
        var params ="result="+total;
        http.open("POST",url, true);
        //Send the proper header information along with the request
        http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        http.send(params);
    }

您可以将结果存储在同一表单的隐藏字段中。这样，当表单发送时，它将随身携带您的计算。隐藏字段将如下所示：

1
<input type='hidden' id='result' name='result'></input>

id部分将从javascript用于存储计算：

1
document.getElementById('result').value=total;

名称部分将设置PHP程序要检索的字段的名称。

确保您的HTML具有指向PHP的有效表单定义。

查看KhorneHoly和Kevin Kloet提供的链接

根据您的代码，您忘记在HTML中使用元素"form"，这将允许您将数据发送到PHP页面

编辑：我同意Javier Elices，您必须在表单元素中添加一个输入，以将该值发送到POST页面。该输入可以隐藏，您可以从javascript函数中分配值

相关讨论

尝试使用隐藏的表单和输入类型(从myPhp.php更改php文件名)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  test
</head>
<body>

<form action="./myPhp.php" method="post">
number of people: <input id="quantity" name="quantity" size='5'></input>
Price: <input type='hidden' id='price' name='price' value='755'></input>

<button type="button" onclick="sum()">calculate</button>
<input type="hidden" id='result' name="result">
<input type="submit" value="Submit">
</form>


function sum() {
    var quantity = parseInt(document.getElementById('quantity').value);

    var price = parseInt(document.getElementById('price').value);

    var total = price * quantity;

    document.getElementById('result').innerHTML=total;
    document.getElementById('result').value=total;      
}


</body>
</html>
相关讨论