Question

我有以下下面的代码，这些代码使用户可以根据自己的选择保留座位。下面提到的这3个是我需要帮助的困难。

要将名为total的变量的总值从Javascript发送到PHP
要将由名为result的变量保留的选定席位总数从Javascript发送到PHP
如果用户未从复选框中选择任何座位，如何使“立即预订”按钮不活动。

以下是我的代码。

index.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Seat(s)</title>
  </head>
  <body>

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') 
{
    if (isset($_POST['submit'])) { //Seat Reserve

        require 'action_page.php';

    }

     elseif (isset($_POST[''])) { //Cancel

        require 'mypage.php';

    }
}

//
$parameter = "this is a php variable";
echo "var myval = foo(" . parameter . ");";
?>



?>

    <h2>Please choose a seat to book</h2>
    <form action="index.php" method="post">
      <input type="checkbox" name="vehicle" id="A1" value="100">$100<br>
      <input type="checkbox" name="vehicle" id="A2" value="65"> $65<br>
      <input type="checkbox" name="vehicle" id="A3" value="55"> $55<br>
      <input type="checkbox" name="vehicle" id="A4" value="50"> $50<br>

      <p id="demo">
        Selected Seat(s)
        <br>
        <span id="selected-seats"></span> <!-- container for selected seats -->
        <br>
        Total: <span id="total-container"></span> USD  

        <button type="submit" class="btn btn-primary" name="submit">Reserve Now</button>
      </p>
    </form>


    <script>
const selections = {};
const inputElems = document.getElementsByTagName("input");
const totalElem = document.getElementById("total-container");
const seatsElem = document.getElementById("selected-seats");

for (let i = 0; i < inputElems.length; i++) {
    if (inputElems[i].type === "checkbox") {
        inputElems[i].addEventListener("click", displayCheck);
    }   
}

function displayCheck(e) {
    if (e.target.checked) {
        selections[e.target.id] = {
            id: e.target.id,
            value: e.target.value
        };
    }
    else {
        delete selections[e.target.id];
    }

    const result = [];
    let total = 0;

    for (const key in selections) {
        result.push(selections[key].id);
        total += parseInt(selections[key].value);
    }

    totalElem.innerText = total;
    seatsElem.innerHTML = result.join(",");
   //window.alert(result);   //Hold Number of Seats Selected.
    //window.alert(total);  //Hold Total Cost of Selected Seats.
}

 var myval = foo("this is a php variable");  // I tried to take this value and output it but it didn't work out.

 $.ajax({
  type: 'POST',
  url: 'action_page.php',
  data: {'variable': total},
});
    </script>





  </body>
</html>

action_page.php

<html>
<head>
<title>Seats Feedback</title>
</head>

<body>


<?php

echo "<br>";

$myval = $_POST['variable'];

print_r($myval);  

?>

期待收到您的来信。

Answer 1

当您不使用AJAX时，以老式方式将数据发布到PHP脚本中是要解决的问题：

在action元素上设置<form>属性以指向目标PHP脚本URL
确保表单的<input>元素包含您要发布的所有数据
在表单中添加一个提交按钮

对于第1步，当前，您的表单要求将发帖请求发送给自己。完全没问题（您可以像使用<?php block ?>一样使用$_POST来确定是显示成功确认还是空白表格，具体取决于action_page.php的内容，但是我想您的意图是最终将数据发送到<input>。我以操作为目标，并从索引中删除了所有PHP。

关于第2步，您的总数当前不在<input type="hidden" name="total" id="hidden-total" value="0">元素中，因此不会发布。为此，我创建了一个不可见的总计元素：vehicle，并在脚本中添加了几行以检索此元素并在重新计算总计时设置其值。您可以将全部两个元素和样式之一组合在一起，以使其外观不可编辑（供读者练习）。

与步骤2有关的另一个问题是，您有四个不同的元素，名称分别为var_dump($_POST)。这些名称/值对中只有一个会被发布，因此我更新了这些元素以使用唯一的名称，以便将它们全部发送出去。

第3步，请确保您有一个“提交”按钮，您已经成功完成了操作。

要验证其是否正常运行，您可以在接收PHP脚本上$_POST['total']查看发布请求的结果，或按名称（例如）检索特定值。 <!DOCTYPE html> <html lang="en"> <head> <title>Seat(s)</title> </head> <body> <h2>Please choose a seat to book</h2> <form action="action_page.php" method="post"> <input type="checkbox" name="vehicle-a1" id="A1" value="100">$100<br> <input type="checkbox" name="vehicle-a2" id="A2" value="65"> $65<br> <input type="checkbox" name="vehicle-a3" id="A3" value="55"> $55<br> <input type="checkbox" name="vehicle-a4" id="A4" value="50"> $50<br> <input type="hidden" name="total" id="hidden-total" value="0"> <p id="demo"> Selected Seat(s) <br> <span id="selected-seats"></span>  <br> Total: <span id="total-container"></span> USD <button type="submit" class="btn btn-primary" name="submit">Reserve Now</button> </p> </form> <script> const selections = {}; const inputElems = document.getElementsByTagName("input"); const totalElem = document.getElementById("total-container"); const hiddenTotalElem = document.getElementById("hidden-total"); const seatsElem = document.getElementById("selected-seats"); for (let i = 0; i < inputElems.length; i++) { if (inputElems[i].type === "checkbox") { inputElems[i].addEventListener("click", displayCheck); } } function displayCheck(e) { if (e.target.checked) { selections[e.target.id] = { id: e.target.id, value: e.target.value }; } else { delete selections[e.target.id]; } const result = []; let total = 0; for (const key in selections) { result.push(selections[key].id); total += parseInt(selections[key].value); } totalElem.innerText = total; hiddenTotalElem.value = total; seatsElem.innerHTML = result.join(","); } </script> </body> </html>。此时，您的PHP脚本可以继续进行，解析/验证/清理帖子数据，呈现适当的响应输出，进行重定向和/或执行其他需要完成的操作，例如写入数据库。

这是完整的代码：

index.html

<!DCOTYPE html>
<html lang="en">
  <head>
    <title>Seats Feedback</title>
  </head>
  <body>

    <?php

      echo "<pre style='font-size: 1.5em;'>"; // format debug post dump

      var_dump($_POST);

    ?>

  </body>
</html>

action_page.php

array(5) {
  ["vehicle-a1"]=>
  string(3) "100"
  ["vehicle-a3"]=>
  string(2) "55"
  ["vehicle-a4"]=>
  string(2) "50"
  ["total"]=>
  string(3) "205"
  ["submit"]=>
  string(0) ""
}

样本输出

netcat

像以前一样，这不是一个具有工业实力的例子，有很大的改进空间，但希望它能传达出基本思想。

通过HTML表单将Javascript变量提交给PHP

1 个答案:

index.html

action_page.php

样本输出