是什么导致在 Squarespace 站点中初始化为 = [] 的数组在第一次引用它之前用 objects 填充?
What causes an array, in a Squarespace site, initialized as = [] ,to be populated with objects prior to the first reference to it?
我写了一些 JavaScript 来拦截提交事件的表单数据,并从几个 <select>
字段构建一个 object 的数组,每次迭代处理一个字段获取字段值并将其推入数组的循环。每次迭代都应构造并 push()
一个 object 到数组中,直到所有表单字段都已处理。
相反,在我网站上的这个 test page 上,我在第一次迭代 之前从所有表单字段中获取了所有 object 的完整数组推。该数组在每次后续迭代中保持完全相同 尽管 重复推送。
js是:
function buildClasses(formData) {
var timeslots = ['0830', '0900', '1030', '1245', '1415', '1545'];
var classrooms = ['chapel', 'A', 'B', 'C', 'D', 'E', 'F', 'I'];
var classes = [];
var ts = '';
var rm = '';
var startIndex = 3;
if(formData[startIndex].value == 'attend') {
formData[startIndex].value = 'chapel';
}
else {formData[startIndex].value = 'unsure';}
for(var i = startIndex; i < formData.length; i++) {
if(formData[i].value == 'unsure') {}
else {
ts = timeslots[i - startIndex];
rm = formDataArr[i].value;
classes.push(
{
timeslot: ts,
room: rm
}
);
} // end else/if
} // end for
return classSelections;
} // end def fn buildClasses
formData
是:
3: Object {name: "select-yui_3_nnn ... nnn-field", value: "unsure"}
4: Object {name: "select-yui_3_nnn ... nnn-field", value: "A"}
5: Object {name: "select-yui_3_nnn ... nnn-field", value: "B"}
6: Object {name: "select-yui_3_nnn ... nnn-field", value: "A"}
7: Object {name: "select-yui_3_nnn ... nnn-field", value: "unsure"}
8: Object {name: "select-yui_3_nnn ... nnn-field", value: "C"}
length: 9
buildClasses()
中的方案是循环遍历从索引 3 开始的表单字段,忽略 "unsure" 值,并使用 non-unsure 构建 classes
值,每次循环迭代一个。
在测试页上调查 console.log()
,我确定,在第一次迭代中,在第一个 push()
之前,classes
是:
1: Object {timeslot: "0900", room: "A"}
2: Object {timesolt: "1030", room: "B"}
3: Object {timeslot: "1245", room: "A"}
5: Object {timeslot: "1545:, room: "C"}
length: 4
这太不可思议了,我知道。但是在做这道题之前,我在 test page 上测试了几十次,总是那个结果。
整个页面都在 Test Conference Registration 2019 页面上。我在代码中散布了控制台日志,这样人们就可以看到每次迭代产生的结果。随心所欲地测试它。 (它连接并更新实时 AWS table,因此您还将在控制台中获得 AWS return 信息。)
功能看起来简单明了。然而,它在我的网站上产生了令人烦恼的结果。该站点建立在 Squarespace 平台上,使用其 'form blocks' 之一构建表单。
我使用相同的代码构建了下面的代码段。它正常运行,正如预期的那样。
因此,Squarespace 表单块的工作方式一定有某种原因导致整个数组甚至在第一次推送之前就出现了。我希望这里的人可能有使用 Squarespace 的经验,并且可能会有所启发。
感谢您阅读本文以及为寻找答案所做的任何努力。
更新:
自从第一次发布这个问题后,我对这个问题有了更好的理解,也有了不同的理解。我已经完全修改了它,更改了问题,并以新标题发布了它。我希望我已经澄清了事情并提出了一个比原来更好的问题。
感谢所有回答此问题第一版的人。
/* new schema w/o comments */
$(document).ready(function() {
init();
}); // end doc.ready
function init() {
document.addEventListener("submit", processFormData);
} // end def fn init
function processFormData(event) {
event.preventDefault();
var formData = $('form').serializeArray();
classes = buildClasses(formData);
} // end def fn processFormData
function buildClasses(fd) {
var timeslots = ['0830', '0900', '1030', '1245', '1415', '1545'];
var classrooms = ['chapel', 'A', 'B', 'C', 'D', 'E', 'F', 'I'];
var ts = '';
var rm = '';
var startIndex = 3;
var classes = [];
console.log('classes post-initialization : ', classes);
if (fd[startIndex].value == 'attend') {
fd[startIndex].value = 'chapel';
} else {
fd[startIndex].value = 'unsure';
}
for (var i = startIndex; i < fd.length; i++) {
if (fd[i].value == 'unsure') {} else {
ts = timeslots[i - startIndex];
rm = fd[i].value;
console.log('fd[i].value : ', i, fd[i].value);
console.log('classes pre-push', classes);
classes.push({
timeslot: ts,
room: rm
});
console.log('classes post-push : ', classes);
} // end else/if
} // end for
return classes;
} // end def fn buildClassSelections
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<div>
<label>First Name
<input type="text" name="fname" size="25">
</label>
</div>
<div>
<label>Last Name
<input type="text" name="lname" size="25">
</label>
</div>
<div>
<label>email address
<input type="email" name="email" size="25">
</label>
</div>
<div>
<label>08:30 Keynote Speaker
<select name="select">
<option value="" name="defaultOptionUnsure">unsure</option>
<option value="attend" name="">attend</option>
<option value="not attend">not attend</option>
</select>
</label>
<label>09:00 Classes
<select name="select">
<option value="">unsure</option>
<option value="class room A">room A</option>
<option value="class room B">room B</option>
</select>
</label>
<label>10:30 Classes
<select name="select">
<option value="">unsure</option>
<option value="class room A">room A</option>
<option value="class room B">room B</option>
</select>
</label>
</div>
<div>
<input type="submit" value="submit form">
</div>
</form>
很难说,但我敢打赌这一行:
if(formDataArr[i] == 'unsure') {} // skip ‘unsure’
应该读作:
if(formDataArr[i].value == 'unsure') {} // skip ‘unsure’
话虽如此,您可能应该单独测试这样的功能,在 node.js REPL 中很容易完成。但没有什么能比得上成熟的 mocha/chai 测试环境。
一开始
const myForm = document.querySelector("#My-Form")
, FormNames = Array.from(myForm.elements).reduce((a,n)=>{ if (n.name ) a.push(n.name); return a }, [])
;
var ResultArray = []
myForm.onsubmit = e =>{
e.preventDefault()
let info = {}
for (let elm of FormNames) {
info[elm] = myForm[elm].value
}
ResultArray.push(info)
myForm.reset()
console.clear()
console.log('ResultArray = ', ResultArray )
}
body { font-family: Arial, Helvetica, sans-serif; }
form { margin: 1em }
label,
button {
display: block;
float: left;
clear: both;
margin: .3em;
}
label { width:24em; line-height: 2em; }
input,
select { float: right; width: 15em;}
<form action="" method="post" id="My-Form">
<label>First Name <input type="text" name="fName"></label>
<label>Last Name <input type="text" name="lName"></label>
<label>email address <input thpe="email" name="email"></label>
<label>08:30 Keynote Speaker
<select name="Keynote_Speaker">
<option value="" >unsure </option>
<option value="attend" >attend </option>
<option value="not attend">not attend </option>
</select>
</label>
<label>09:00 Classes
<select name="Classes_09_00">
<option value="" >unsure </option>
<option value="class room A">room A </option>
<option value="class room B">room B </option>
<option value="class room C">room C </option>
</select>
</label>
<label>10:30 Classes
<select name="Classes_10_30">
<option value="" >unsure </option>
<option value="class room A">room A </option>
<option value="claww room B">room B </option>
<option value="class room C">room C </option>
</select>
</label>
<button type="submit">submit form</button>
</form>
我写了一些 JavaScript 来拦截提交事件的表单数据,并从几个 <select>
字段构建一个 object 的数组,每次迭代处理一个字段获取字段值并将其推入数组的循环。每次迭代都应构造并 push()
一个 object 到数组中,直到所有表单字段都已处理。
相反,在我网站上的这个 test page 上,我在第一次迭代 之前从所有表单字段中获取了所有 object 的完整数组推。该数组在每次后续迭代中保持完全相同 尽管 重复推送。
js是:
function buildClasses(formData) {
var timeslots = ['0830', '0900', '1030', '1245', '1415', '1545'];
var classrooms = ['chapel', 'A', 'B', 'C', 'D', 'E', 'F', 'I'];
var classes = [];
var ts = '';
var rm = '';
var startIndex = 3;
if(formData[startIndex].value == 'attend') {
formData[startIndex].value = 'chapel';
}
else {formData[startIndex].value = 'unsure';}
for(var i = startIndex; i < formData.length; i++) {
if(formData[i].value == 'unsure') {}
else {
ts = timeslots[i - startIndex];
rm = formDataArr[i].value;
classes.push(
{
timeslot: ts,
room: rm
}
);
} // end else/if
} // end for
return classSelections;
} // end def fn buildClasses
formData
是:
3: Object {name: "select-yui_3_nnn ... nnn-field", value: "unsure"}
4: Object {name: "select-yui_3_nnn ... nnn-field", value: "A"}
5: Object {name: "select-yui_3_nnn ... nnn-field", value: "B"}
6: Object {name: "select-yui_3_nnn ... nnn-field", value: "A"}
7: Object {name: "select-yui_3_nnn ... nnn-field", value: "unsure"}
8: Object {name: "select-yui_3_nnn ... nnn-field", value: "C"}
length: 9
buildClasses()
中的方案是循环遍历从索引 3 开始的表单字段,忽略 "unsure" 值,并使用 non-unsure 构建 classes
值,每次循环迭代一个。
在测试页上调查 console.log()
,我确定,在第一次迭代中,在第一个 push()
之前,classes
是:
1: Object {timeslot: "0900", room: "A"}
2: Object {timesolt: "1030", room: "B"}
3: Object {timeslot: "1245", room: "A"}
5: Object {timeslot: "1545:, room: "C"}
length: 4
这太不可思议了,我知道。但是在做这道题之前,我在 test page 上测试了几十次,总是那个结果。
整个页面都在 Test Conference Registration 2019 页面上。我在代码中散布了控制台日志,这样人们就可以看到每次迭代产生的结果。随心所欲地测试它。 (它连接并更新实时 AWS table,因此您还将在控制台中获得 AWS return 信息。)
功能看起来简单明了。然而,它在我的网站上产生了令人烦恼的结果。该站点建立在 Squarespace 平台上,使用其 'form blocks' 之一构建表单。
我使用相同的代码构建了下面的代码段。它正常运行,正如预期的那样。
因此,Squarespace 表单块的工作方式一定有某种原因导致整个数组甚至在第一次推送之前就出现了。我希望这里的人可能有使用 Squarespace 的经验,并且可能会有所启发。
感谢您阅读本文以及为寻找答案所做的任何努力。
更新:
自从第一次发布这个问题后,我对这个问题有了更好的理解,也有了不同的理解。我已经完全修改了它,更改了问题,并以新标题发布了它。我希望我已经澄清了事情并提出了一个比原来更好的问题。
感谢所有回答此问题第一版的人。
/* new schema w/o comments */
$(document).ready(function() {
init();
}); // end doc.ready
function init() {
document.addEventListener("submit", processFormData);
} // end def fn init
function processFormData(event) {
event.preventDefault();
var formData = $('form').serializeArray();
classes = buildClasses(formData);
} // end def fn processFormData
function buildClasses(fd) {
var timeslots = ['0830', '0900', '1030', '1245', '1415', '1545'];
var classrooms = ['chapel', 'A', 'B', 'C', 'D', 'E', 'F', 'I'];
var ts = '';
var rm = '';
var startIndex = 3;
var classes = [];
console.log('classes post-initialization : ', classes);
if (fd[startIndex].value == 'attend') {
fd[startIndex].value = 'chapel';
} else {
fd[startIndex].value = 'unsure';
}
for (var i = startIndex; i < fd.length; i++) {
if (fd[i].value == 'unsure') {} else {
ts = timeslots[i - startIndex];
rm = fd[i].value;
console.log('fd[i].value : ', i, fd[i].value);
console.log('classes pre-push', classes);
classes.push({
timeslot: ts,
room: rm
});
console.log('classes post-push : ', classes);
} // end else/if
} // end for
return classes;
} // end def fn buildClassSelections
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<div>
<label>First Name
<input type="text" name="fname" size="25">
</label>
</div>
<div>
<label>Last Name
<input type="text" name="lname" size="25">
</label>
</div>
<div>
<label>email address
<input type="email" name="email" size="25">
</label>
</div>
<div>
<label>08:30 Keynote Speaker
<select name="select">
<option value="" name="defaultOptionUnsure">unsure</option>
<option value="attend" name="">attend</option>
<option value="not attend">not attend</option>
</select>
</label>
<label>09:00 Classes
<select name="select">
<option value="">unsure</option>
<option value="class room A">room A</option>
<option value="class room B">room B</option>
</select>
</label>
<label>10:30 Classes
<select name="select">
<option value="">unsure</option>
<option value="class room A">room A</option>
<option value="class room B">room B</option>
</select>
</label>
</div>
<div>
<input type="submit" value="submit form">
</div>
</form>
很难说,但我敢打赌这一行:
if(formDataArr[i] == 'unsure') {} // skip ‘unsure’
应该读作:
if(formDataArr[i].value == 'unsure') {} // skip ‘unsure’
话虽如此,您可能应该单独测试这样的功能,在 node.js REPL 中很容易完成。但没有什么能比得上成熟的 mocha/chai 测试环境。
一开始
const myForm = document.querySelector("#My-Form")
, FormNames = Array.from(myForm.elements).reduce((a,n)=>{ if (n.name ) a.push(n.name); return a }, [])
;
var ResultArray = []
myForm.onsubmit = e =>{
e.preventDefault()
let info = {}
for (let elm of FormNames) {
info[elm] = myForm[elm].value
}
ResultArray.push(info)
myForm.reset()
console.clear()
console.log('ResultArray = ', ResultArray )
}
body { font-family: Arial, Helvetica, sans-serif; }
form { margin: 1em }
label,
button {
display: block;
float: left;
clear: both;
margin: .3em;
}
label { width:24em; line-height: 2em; }
input,
select { float: right; width: 15em;}
<form action="" method="post" id="My-Form">
<label>First Name <input type="text" name="fName"></label>
<label>Last Name <input type="text" name="lName"></label>
<label>email address <input thpe="email" name="email"></label>
<label>08:30 Keynote Speaker
<select name="Keynote_Speaker">
<option value="" >unsure </option>
<option value="attend" >attend </option>
<option value="not attend">not attend </option>
</select>
</label>
<label>09:00 Classes
<select name="Classes_09_00">
<option value="" >unsure </option>
<option value="class room A">room A </option>
<option value="class room B">room B </option>
<option value="class room C">room C </option>
</select>
</label>
<label>10:30 Classes
<select name="Classes_10_30">
<option value="" >unsure </option>
<option value="class room A">room A </option>
<option value="claww room B">room B </option>
<option value="class room C">room C </option>
</select>
</label>
<button type="submit">submit form</button>
</form>