这是我的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'];
答案 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);