javascript - 是什么导致在 Squarespace 站点中初始化为 = [] 的数组在第一次引用之前被对象填充?
问题描述
我编写了一些 JavaScript 来拦截提交事件的表单数据,并从多个字段构建对象数组,<select>
每次循环处理一个字段,该循环获取字段值并将其推送到数组中。每次迭代都应该构造push()
一个对象到数组中,所有表单字段都已处理。
相反,在我网站上的这个测试页面上,我在第一次 push 之前的第一次迭代中从所有表单字段中获取了所有对象的完整数组。尽管反复推送,但数组在每次后续迭代中都保持不变。
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 开始的表单字段,忽略“不确定”值,并classes
使用不确定值进行构建,每次循环迭代一个。
在测试页面上进行调查console.log()
,我确定在第一次迭代中,在 first 之前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 Conference Registration 2019页面上进行。我用控制台日志乱扔代码,这样就可以看到每次迭代产生了什么。随心所欲地测试它。(它连接并更新实时 AWS 表,因此您还将在控制台中获得 AWS 返回信息。)
该功能看起来简单明了。然而,它在我的网站上产生了令人烦恼的结果。该网站建立在Squarespace平台上,使用其“表单块”之一来构建表单。
我使用相同的代码构建了下面的代码片段。正如预期的那样,它正常运行。
因此,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>
解决方案
作为一个开始
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>
推荐阅读
- xamarin - 我在设置 MvvmCross 6.0 时做错了什么?
- c# - 如果控制器中的过滤条件,C# mvc 5 退出
- javascript - 在无线电检查中显示/隐藏表格
- javascript - 是否可以在 JSON 中嵌入 youtube 代码?
- tensorflow - 无法将核心 Estimator 与 contrib Predictor 一起使用
- javascript - 如何使用jquery提取json,多个值
- python - 字母等级'D','C-',...,'A+'的Pythonic自定义排序?
- javascript - 如何自动单击href以选择某些内容
- wso2 - WSO2 Enterprise Integrator 6.1.1 为 IBM Websphere Application Server 8.5 配置 JMS Store
- apache-spark - 就地圆形 Spark DataFrame