复选框值未使用 ajax 传递给 PHP答案

【问题标题】：Checkbox values are NOT passing to PHP using ajax复选框值未使用 ajax 传递给 PHP
【发布时间】：2017-05-06 15:57:37
【问题描述】：

这是我的 HTML 代码（仅 CheckBOX 部分）我需要检查用户的多项选择并使用 ajax 将其发送到 php。然后我需要向管理员发送邮件

<fieldset class="form-group">
    <label>Preferred method of contact : </label>
    <br>
    <br>
    <div class="form-check">

        <label class="checkbox-inline">
            <input type="checkbox" name="color" id="color" value="Whatsapp">Whatsapp

        </label>
        <label class="checkbox-inline">

            <input type="checkbox" name="color" id="color" value="Viber">Viber
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" name="color" id="color" value="E-Mail">E-Mail
        </label>
    </div>
</fieldset>

这是将值发送到 php 的 Ajax 部分。在我与我们联系的表格中，名称电话地址和下拉列表在 ajax 和 php 中运行良好，但只有这个复选框部分不起作用。

<script>
function _(id) {
   return document.getElementById(id);
}

function submitForm() {
   _("mybtn").disabled = true;
   _("status").innerHTML = 'please wait ...';
   var formdata = new FormData();

   formdata.append("n", _("n").value);
   formdata.append("e", _("e").value);
   formdata.append("m", _("m").value);
   formdata.append("no", _("no").value);
   formdata.append("exampleSelect1", _("exampleSelect1").value);
   formdata.append("exampleSelect2", _("exampleSelect2").value);
   formdata.append("exampleSelect3", _("exampleSelect3").value);

   formdata.append("color", _("color").value);

   var ajax = new XMLHttpRequest();
   ajax.open("POST", "example_parser.php");
   ajax.onreadystatechange = function() {
      if (ajax.readyState == 4 && ajax.status == 200) {
         if (ajax.responseText == "success") {
            _("my_form").innerHTML = '<h2>Thanks ' + _("n").value + ', your message has been sent.</h2>';
         } else {
            _("status").innerHTML = ajax.responseText;
            _("mybtn").disabled = false;
         }
      }
   }
   ajax.send(formdata);
}
</script>

这是我来自 php 页面的 PHP 代码。我需要将所有复选框结果传递给这个 php 部分并将声明器传递给一个变量，然后我可以将它用于邮件。

if( isset($_POST['n']) && isset($_POST['e']) && isset($_POST['m']) ){
$n = $_POST['n']; // HINT: use preg_replace() to filter the data
$e = $_POST['e'];
$no = $_POST['no'];
$m = nl2br($_POST['m']);
$pkg = $_POST['exampleSelect1'];
$cnty = $_POST['exampleSelect2'];
$how = $_POST['exampleSelect3'];

$var = $_POST['color'];

【问题讨论】：

您不能使用相同的 id。 ID 必须是唯一的。
你可以在勾选复选框后尝试制作一个Jax。我认为如果未选中复选框，则其值在 ajax 请求时为空白。
我得到了答案。现在它的工作:) 无论如何，Thnku :)

标签： php ajax checkbox

【解决方案1】：

首先，您有三个具有相同 id="color" 的元素。那么：

document.getElementById("color")

总是会先返回，不管是否选中。声明另一个函数是个好主意：

function __(selector) {
    return document.querySelectorAll(selector);
}

那么，你可以这样写：

var colors = __('input[name="color"]:checked');
var result = [];

for(var i = 0; i < colors.length; i++) {
   result.push(colors[i].value);
}

formdata.append("color", result);

【讨论】：

WOwww 真的是它的工作 :) thnku Sooo much :) :)