JavaScript 用户输入文本到选项值不发送到 php答案

【问题标题】：JavaScript user input text to options value not sending to phpJavaScript 用户输入文本到选项值不发送到 php
【发布时间】：2017-11-16 09:04:13
【问题描述】：

我希望用户在 iframe 中从几个不同的文本框中输入项目数，并将它们显示在 parent.php 中作为一个组合选项列表，您可以在其中选择每个项目并根据需要删除它。然后我想通过 php 将所有选项值的最终列表发送到电子邮件。在将选项值分配给 php 变量之前，我一切正常。我一直没有收到任何没有列表亲属的电子邮件。我不确定如何将选项值传递给 php。

这是我目前得到的。

父.php

<?php

 $to = 'myemail@email.com';
 $subject = 'Available Item Lists';

 if(isset($_POST['submit'])){
      foreach ($_POST['qlist'] as $selectList)   {
           echo "You have the following :" .$selectList; // Display all 
   selection values
      $body = $selectList;
      }

      $headers = '$email';
      $headers .=  'MIME-Version: 1.0' . "\r\n"; 
      $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

      mail ($to, $subject, $body, $headers);
  }
  ?>

    <form method="post" id="quote-form" name="quote-form" action="?"> 
        <label for="items">List of items</label><br />
        <div class="form-section">
            <select name="qlist[]" id="qlist" multiple="multiple"></select>
            <button id="deleteButton" onclick="deleteEntry(); return 
false;">Delete</button>
       <input type="submit" value="Send" name="submit" id="submit">
    </div>

<script type="text/javascript">

       function displayQuantity(noOfitems, labelVal)  {
          var qq = noOfitems;
          var labelName = labelVal;
          var quoteQuantity = document.getElementById("qlist");
          var quantity = quoteQuantity.value;
          quantity += labelName + ": ";
          quantity += qq;
          quantity += " pcs\n";
          quoteQuantity.value = quantity;
          var option = document.createElement("option");
          option.text = quantity;
          quoteQuantity.add(option);

       }

       function deleteEntry() {
          var myList = document.getElementById('qlist');
          var i;
          for (i = myList.length - 1; i>=0; i--) {
              if (myList.options[i].selected) {
                  myList.remove(i);
              }
          }
       }
</script>

iframe.php

<div class="order-quantity">
   <form name="form">
        <label id="itemType">Heavy Duty Square Core Drilled</label>
        <input type="number" id="total-quantity" name="quantity" />
        <button type="button" id="addItem"  
             onclick="parent.displayQuantity(this.form.quantity.value, 
         getVal())">Add</button>
   </form>
</div>

    <script type="text/javascript">
    function getVal() {
       var labelVal = document.getElementById("itemType").textContent;
       return labelVal;
    }
    </script>

【问题讨论】：

任何控制台错误？为什么选择 iFrame？无论如何它必须来自同一个来源，所以为什么不只是一个 div？
也永远不要这样做：name="submit" id="submit" 如果你想使用它，它会隐藏表单的提交事件
好的。我会改变它。提交按钮仍然有效。
没有控制台错误。我需要在 iframe 中加载其他页面，以便父页面保持不变而无需重新加载。这不是问题。我让它工作了。问题是 php 没有获取选项列表值。

标签： javascript php html iframe

【解决方案1】：

来自

 foreach ($_POST['qlist'] as $selectList)   {
           echo "You have the following :" .$selectList; // Display all 
   selection values
      $body = $selectList;
      }

到

$Data = $_POST["qlist"];
      foreach ($Data as $selectList)   {
           echo "You have the following :" .$selectList; // Display all 
      $body = $selectList;
      }

【讨论】：

是不是因为 php 得到了空的 qlist[] 选项并且无法识别用户的输入？
在您的问题中，您提到文件名为 parent.html 如果您使用 .html 文件 php 函数将不起作用，您需要将其更改为 .php 或者您可以创建新的 php 函数并提供表单操作到新的自定义创建函数
输入错误。我的意思是parent.php。所有文件都保存在 .php 中。
实际上这段代码在我的本地服务器上运行。如果您使用lampp服务器，请使用tail -f /var/log/apache2/error.log检查是否有任何错误日志
我在本地和我的域服务器上运行它。我仍然无法从两台服务器上的 php 获取 qlist 值。

【解决方案2】：

请检查“enable_post_data_reading”状态

禁用此选项会导致 $_POST 和 $_FILES 不会被填充。

如果它在您的 php.ini 文件中被禁用，请启用它并重新启动 apache

【讨论】：

我可以通过发送到电子邮件的 php 传递其他属性，例如用户名、电子邮件地址、评论。只是这个选项值有问题传递给 php :(
基本上这段代码在我的系统中工作，我添加了 4-5 个选项，然后选择其中一些，然后我在我的 POST 数组中获得选择的值
是的，我无法添加选项。用户必须添加它们。一旦用户完成添加他们然后点击发送按钮发送到电子邮件他的选项列表。
一个qus，在将选项添加到多选选项后，您是否在单击发送按钮之前选择了任何选项，请确认您遵循给定的步骤1）将选项添加到多选2）从多选选项中选择任何添加的选项 3）单击发送按钮
我想将列表中的所有选项发送到 php.ini。我已经完成了第一步和第三步。我不确定如何在不选择它们的情况下发送所有选项。

【解决方案3】：

我明白了！！我将此功能添加到提交按钮以选择列表中的所有选项：D

   function selectAll()  { 
       selectBox = document.getElementById("qlist");
       for (var i = 0; i < selectBox.options.length; i++) { 
           selectBox.options[i].selected = true; 
       } 
   }

【讨论】：