Question

目前我正在使用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/>";
?>

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

Answer 1

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

<?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>

Answer 2

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

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

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

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

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

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

Answer 3

尝试使用隐藏的表单和输入类型（从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>

Answer 4

检查KhorneHoly和Kevin Kloet提供的链接

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

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

使用JavaScript计算值并发送给PHP

4 个答案: