使用 JavaScript 计算值并发送到 PHP [重复]答案

【问题标题】：Calculate the value using JavaScript and send to PHP [duplicate]使用 JavaScript 计算值并发送到 PHP [重复]
【发布时间】：2018-03-07 19:47:43
【问题描述】：

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

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

HTML：

number of people:<input id="quantity" name="quantity" size='5'></input>
<br>
<br>
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：

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：

<?php
  $total = $_POST['result'];

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

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

【问题讨论】：

段落不是表单元素。因此，就表单而言，为段落分配值没有任何效果。

标签： javascript php

【解决方案1】：

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>test</title>
</head>
<body>

<form action="./myPhp.php" method="post">
number of people: <input id="quantity" name="quantity" size='5'></input><br><br>
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>

<script>
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;      
}
</script>

</body>
</html>

【讨论】：

我已经使用了表单 action='php.php' method='post' 哈哈但是没用..
实际上我提供的示例在我的电脑上正常工作。你能告诉我你运行它时的错误是什么吗？

【解决方案2】：

查看 KhorneHoly 和 Kevin Kloet 提供的链接

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

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

【讨论】：

我忘了在这里写
。实际上我的代码已经有形式哈哈..
哦..在那种情况下，我编辑了我的答案

【解决方案3】：

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

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

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

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

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

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

【讨论】：

【解决方案4】：

尝试使用表单或 Ajax 发送请求。 Hier 就是一个例子：

<?php
if($_POST['result']){
    $total = $_POST['result'];
    echo "price :".$total."<br/>";
}
?>   

number of people: <input id="quantity" name="quantity" size='5'><br><br>            
Price: <input type='hidden' id='price' name='price' value='755'>            
<button type="button" onclick="sum()">calculate</button>            
<p id='result' name='result'></p>
<script>
    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);
    }
</script>

【讨论】：