复选框值未使用AJAX传递给PHP

Question

这是我的HTML代码(仅复选框部分(，我需要从用户检查多个选择，然后使用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部分。在我的联系我们中，Phoneno地址和下拉词与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'];

Answer 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);