Javascript HTML表单数据未发布到PHP页面答案

【问题标题】：Javascript HTML form data not being posted to PHP pageJavascript HTML表单数据未发布到PHP页面
【发布时间】：2021-02-10 19:16:34
【问题描述】：

我正在创建一个将商品添加到购物车的购物车功能，然后如果用户按下订单按钮，那么我希望将数据发布到我的 PHP 页面。我有以下 HTML

 <div class="main">
  <form action = "test.php" method = "POST">
   <div class = "cart-items">   

   </div>
   <div class="btn btn-primary btn-purchase"><input type = "submit" name ="submit" class="btn_1 gradient full-width mb_5">Order Now></div>
  </form>
 </div>

我使用 javascript 填充“cart-items”类，

var cartRowContents = 
`<ul class="clearfix">
  <div class="cart-item cart-column">
    <li class = 'remove'>
      <a href="#0"><input type = "hidden" name = "selectedIDs[]"  value="${itemID}"></a>
   </li>
 </div>
</ul>`

href 标记只应用了 css，我测试了删除标记是否是问题所在，但它仍然没有显示“selectedIDs”发布数据。

我在 test.php 中的代码如下。正如我在 isset 函数中看到的那样，表单正在发布，但唯一发布的是提交按钮中的“提交”。

<?php
   if(isset($_POST["submit"]))
   {
       echo "yes it has submitted";
   }
   print_r($_POST);
?>

请参阅下面的购物车在控制台日志中的外观。 "cart-items" 类中还有其他元素，但我将它们从本示例中删除以保持清晰。

【问题讨论】：

我能看到的两件事是它看起来不像你的 html 最终出现在表单标签中（据我从你的屏幕截图中可以看出，你可能已经把它剪掉了）还有你的cart-quantity-input 类的输入没有 name 属性，因此不会出现在 $_POST 变量中。我不确定这是否能解决所有问题，但这可能是一个开始。
@FrankA.Yeah 我只是把它剪掉了，我不想给出一长串要通读的代码。我获取的控制台日志列出了“购物车项目”的内容，请参阅更新后的原始帖子，这将显示“主”类的全部内容，这是表单所在的位置。另外，我将对“购物车数量”进行排序” 接下来，我只是想先获取“selectedIDs”的帖子值，但什么都没有发生，你还有什么可以看到的。我很难过。

标签： javascript php html

【解决方案1】：

您不能使用提交将隐藏按钮附加到表单。您必须将提交类型更改为<input type = "button" name ="submit"> 并将隐藏字段附加到表单，然后通过$('form').submit(); 提交表单。当点击提交按钮时，提交表单的过程已经开始。

您也可以参考： jQuery not posting all inputs of a form after the .append()

【讨论】：

如何将隐藏字段附加到表单中？你在使用 append() 吗？
啊，是的，我明白现在提交帖子是在页面加载时完成的，所以我添加的任何内容都不会被考虑在内。我试过 <form id = "myForm" action = "test.php" method = "POST"> <input type = "button" id ="submitBtn" 然后我在 .js 文件中有这个 jquery 代码 $(document).ready(function(){ $("#submitBtn").click(function(){ $("#myForm").submit(); // Submit the form}); }); 但它仍然没有将页面发送到 test.php 或将 SelectedID 带过来。
在 html 元素的屏幕截图中，我找不到提交按钮。你那里有吗？
是的，对不起，我现在已经更新了，检查 OP。感谢您的帮助。
您可以将表单提交更改为 ajax。这样我们就可以跟踪网络选项卡中发生的事件。我无法为您找到任何其他解决方案。