复选框值不是使用ajax传递给PHP

时间:2017-05-06 06:44:27

标签: php ajax checkbox

这是我的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>

这是Ajax Part to SEND值到php。在我的联系我们形式NAME PHONENO ADDRESS和下拉列表与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'];

1 个答案:

答案 0 :(得分: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);