我正在尝试创建一个数组并获取表单提交的所有值并将它们放入该数组中。我需要这样做,因为在这段代码的 .each 函数中,我必须对每个客户端的所有值进行额外的加密。这是一个包含数百个正在变化的字段的表单。所以它必须是一个数组才能工作。我尝试在 jQuery 中进行以下操作和其他几种类似的类型,但没有骰子。任何人都可以帮忙吗?谢谢。
编辑:发布我的工作解决方案。谢谢您的帮助。编辑 2:接受 sabithpocker 的回答,因为它允许我保留我的键名。
我正在尝试创建一个数组并获取表单提交的所有值并将它们放入该数组中。我需要这样做,因为在这段代码的 .each 函数中,我必须对每个客户端的所有值进行额外的加密。这是一个包含数百个正在变化的字段的表单。所以它必须是一个数组才能工作。我尝试在 jQuery 中进行以下操作和其他几种类似的类型,但没有骰子。任何人都可以帮忙吗?谢谢。
编辑:发布我的工作解决方案。谢谢您的帮助。编辑 2:接受 sabithpocker 的回答,因为它允许我保留我的键名。
var inputArray = {};
//jQuery(this).serializeArray() = [{name: "field1", value:"val1"}, {name:field2...}...]
jQuery(this).serializeArray().each(function(index, value) {
inputArray[value.name] = encrypt(value.value);
});
//now inputArray = [{name: "field1", value:"ENCRYPTED_val1"}, {name:field2...}...]
//now to form the POST message
postMessages = [];
$(inputArray).each(function(i,v){
postMessages.push(v.name + "=" + v.value);
});
postMessage = postMessages.join('&');
查看serializeArray ()以查看 JSON 数组格式。
很明显,问题在于this
您的情况不是您想象的数组。请澄清this
指针指的是什么,或者只是通过做一个来验证自己console.log(this)
当您更新答案时,在您的情况下,this
指针指的是您提交的表单,您想如何迭代表单?你想用每个来实现什么?
摆弄大写而不是加密
$('#x').submit(function (e) {
e.preventDefault();
var inputArray = [];
console.log(jQuery(this).serializeArray());
jQuery(jQuery(this).serializeArray()).each(function (index, value) {
item = {};
item[value.name] = value.value.toUpperCase();
inputArray[index] = item;
});
console.log(inputArray);
postMessages = [];
$(inputArray).each(function (i, v) {
for(var k in v)
postMessages[i] = k + "=" + v[k];
console.log(i, v);
});
postMessage = postMessages.join('&');
console.log(postMessage);
return false;
});
问题是它#cja_form
不会使用each
. 您可以serialize()
改用:
inputArray = jQuery(this).serialize();
进一步的版本,如果你需要编辑每个元素,你可以使用这个:
var input = {};
$(this).find('input, select, textarea').each(function(){
var element = $(this);
input[element.attr('name')] = element.val();
});
jQuery(document).ready(function($){
$("#cja_form").submit(function(event){
$("#submitapp").attr("disabled","disabled");
$("#cja_status").html('<div class="cja_pending">Please wait while we process your application.</div>');
var input = {};
$(this).find('input, select, textarea').each(function(){
var element = $(this);
input[element.attr('name')] = element.val();
});
$.post('../wp-content/plugins/coffey-jobapp/processes/public-form.php', input)
.success(function(result){
if (result.indexOf("success") === -1) {
$("#submitapp").removeAttr('disabled');
$("#cja_status").html('<div class="cja_fail">'+result+'</div>');
}
else {
page = document.URL;
if (page.indexOf('?') === -1) {
window.location = page + '?action=success';
}
else {
window.location = page + '&action=success';
}
}
})
.error(function(){
$("#submitapp").removeAttr('disabled');
$("#cja_status").html('<div class="cja_fail"><strong>Failed to submit article! Check your internet connection.</strong></div>');
});
event.preventDefault();
event.returnValue = false;
return false;
});
});
原答案:
javascript 中没有关联数组,您需要一个哈希/对象:
var input = {};
jQuery(this).each(function(k, v){
input[k] = v;
});
这是我的工作解决方案。在此示例中,它将 cat 添加到所有条目,然后将其作为数组发送到 PHP 页面。从那里我通过 $_POST['data'] 访问我的数组。我在http://blog.johnryding.com/post/1548511993/how-to-submit-javascript-arrays-through-jquery-ajax-call上找到了这个解决方案
jQuery(document).ready(function () {
jQuery("#cja_form").submit(function(event){
jQuery("#submitapp").attr("disabled","disabled");
jQuery("#cja_status").html('<div class="cja_pending">Please wait while we process your application.</div>');
var data = [];
jQuery.each(jQuery(this).serializeArray(), function(index, value) {
data[index] = value.value + "cat";
});
jQuery.post('../wp-content/plugins/coffey-jobapp/processes/public-form.php', {'data[]': data})
.success(function(result){
if (result.indexOf("success") === -1) {
jQuery("#submitapp").removeAttr('disabled');
jQuery("#cja_status").html('<div class="cja_fail">'+result+'</div>');
} else {
page = document.URL;
if(page.indexOf('?') === -1) {
window.location = page+'?action=success';
} else {
window.location = page+'&action=success';
}
}
})
.error(function(){
jQuery("#submitapp").removeAttr('disabled');
jQuery("#cja_status").html('<div class="cja_fail"><strong>Failed to submit article! Check your internet connection.</strong></div>');
});
event.preventDefault();
event.returnValue = false;
});
});