javascript - 使用 Javascript 验证为 PHP 电子邮件传递复选框数组
问题描述
我有一个包含两个复选框数组的表单,我需要将它们传递给 PHP 电子邮件脚本。表单数据在发送到 PHP 脚本之前使用 javascript 函数进行验证...我正在努力将数组放入我的表单数据这里是我的复选框数组之一
<div class="choice-group">
<div class="row">
<div class="col-md-4">
<div class="choice">
<input type="checkbox" id="low" name="budgetvar[]" value="low">
<label for="low">Low Cost</label>
</div>
</div>
<div class="col-md-4">
<div class="choice">
<input type="checkbox" id="medium" name="budgetvar[]" value="medium">
<label for="medium">Medium Range</label>
</div>
</div>
<div class="col-md-4">
<div class="choice">
<input type="checkbox" id="premuim" name="budgetvar[]" value="premuim">
<label for="premuim">Premium Range</label>
</div>
</div>
</div>
</div>
这是我的 Javascript formData
formData = {
'firstname': $('input[name=firstname]').val(),
'lastname': $('input[name=lastname]').val(),
'phone': $('input[name=phone]').val(),
'email': $('input[name=email]').val(),
'consent': $('input:checkbox[name=consent]').is(':checked'),
'budgetvar': $('input:checkbox[name=budgetvar]').val(),
'optionsvar': $('input:checkbox[name=optionsvar]').val(),
'message': $('textarea[name=message]').val()
};
这是我的 .ajax 代码
$.ajax({
url: "includes/mail/mail.php",
type: "POST",
data: formData,
success: function(data, textStatus, jqXHR) {
$('#status').text(data.message);
if (data.code) //If mail was sent successfully, reset the form.
$('#contact-form').closest('form').find("input[type=text], textarea").val("");
},
error: function(jqXHR, textStatus, errorThrown) {
$('#status').text(jqXHR);
}
});
然后我希望在我的 PHP 脚本中获取变量,如下所示
$budget = implode(', ', $_POST['budgetvar']);
关于如何将这些值放入数组中的任何帮助,我可以通过 php 电子邮件使用,这将是一个巨大的帮助!我看过这里,但我似乎找不到任何可以尝试和操作来解决我的问题的东西。这个相对较新的解决方案如此复杂的解决方案似乎有点让我头疼
提前致谢!
解决方案
只需使用内置FormData
对象收集所有数据:
formData = new FormData( document.querySelector("form") );
浏览器可以为你做所有的收集。您无需逐个挑选每个表单控件。
如果您设置使用发送,请.ajax
确保您设置processData: false; contentType: false
停止 jQuery 试图变得聪明(这将打破 XMLHttpRequest 的自然聪明)。
如果您真的想手动执行此操作,那么您需要:
- 找到所有选中的输入(使用他们的真实姓名,最后有一个
[]
) - 获取他们的价值观
- 将它们放入数组中
例如
'budgetvar': $('input[name="budgetvar[]"]:checked').map(
(index, element) => element.value
).get()