通过HTML表单向PHP提交Javascript变量_Javascript_Php

通过HTML表单向PHP提交Javascript变量

javascript php

通过HTML表单向PHP提交Javascript变量,javascript,php,Javascript,Php,我有以下代码，用户可以根据自己的选择选择预订座位。下面提到的3个问题是我面临的困难，我需要帮助将名为total的变量的总值从Javascript发送到PHP 将一个名为results from Javascript的变量所持有的所选席位总数发送到PHP 如果用户未从复选框中选择任何座位，如何使“立即预订”按钮处于非活动状态下面是我的代码 index.php <!DOCTYPE html> <html lang="en"> <head> <

我有以下代码，用户可以根据自己的选择选择预订座位。下面提到的3个问题是我面临的困难，我需要帮助

将名为total的变量的总值从Javascript发送到PHP

将一个名为results from 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>


座位(s)
?>
请选择一个座位预定
100美元

65美元

55美元

50美元


选定座位




总额：美元
现在预订

常量选择={}；
常量inputElems=document.getElementsByTagName（“输入”）；
const totalElem=document.getElementById（“总容器”）；
const seatsElem=document.getElementById（“选定座位”）；
for（设i=0；i


action_page.php
<html>
<head>
<title>Seats Feedback</title>
</head>

<body>


<?php

echo "<br>";

$myval = $_POST['variable'];

print_r($myval);  

?>


座位反馈

期待着您的来信。
当您不使用AJAX时，以老式方式将数据发布到PHP脚本是一个问题：
在
元素上设置操作
属性以指向目标PHP脚本URL
确保表单的
元素包含要发布的所有数据
向表单中添加提交按钮
对于步骤1，当前，您的表单要求将post请求发送给自身。这完全没问题（您可以像现在这样使用
来决定是显示成功确认还是显示空白表单，这取决于$\u POST
的内容，但我猜您的意图是最终将数据发送到action\u page.php
。我将该操作作为目标并从索引中删除了所有php
至于步骤2，您的合计当前不在
元素中，因此不会被过账。我为此创建了一个不可见的合计元素：
，并在脚本中添加了几行，以检索此元素并在重新计算合计时设置其值。您可以将两个合计元素和样式组合在一起一个看起来不可编辑（读者练习）
与第2步相关的另一个问题是，您有四个不同的元素，名称为vehicle
。这些名称/值对中只有一个将被发布，因此我更新了这些元素以使用唯一的名称，以便它们都将被发送
步骤3，确保您有一个提交按钮，您已经成功完成
要验证它是否正常工作，您可以对接收的PHP脚本执行var\u dump（$\u POST）
，以查看POST请求的结果或通过名称检索特定值，例如$\u POST['total']
。此时，您的PHP脚本可以继续分析/验证/清理post数据、呈现正确的响应输出、执行重定向和/或执行其他需要执行的操作，例如写入数据库
以下是完整的代码：
index.html
如前所述，这不是一个行业优势示例，还有很多改进空间，但希望它能传达基本思想。
@ggorlen请检查新问题。检查使用Javascript激活和停用提交按钮。然后在表单中使用隐藏输入来传达您计算的值（总计
和结果）使用Javascript。@KIKO软件如何给出使用隐藏输入的示例？请参阅：如果我想限制要选择的座位数怎么办？仅示例3个座位？@ggorlenneed有关添加限制的帮助，以便用户一次可以选择5个座位@ggorlen@Wilson请打开一个新问题，然后发布代码来重现你现在的处境，我相信有人会问你帮帮忙，让我来。
<!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> <!-- 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 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>

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

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