チェックボックスの値はajaxを使ってPHPに渡されません

Question

これは私のHTMLコードです（チェックボックスの部分のみ）。ユーザーからの複数の選択肢をチェックし、ajax.thenを使用して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 Partです。私の連絡先のフォームで名前の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"の3つの要素があります。 は次に：

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