Я написал некоторый JavaScript для перехвата данных формы в событии submit и для создания массива объектов из нескольких полей <select>, обрабатывая одно поле за итерацию цикла, который захватывает значение поля и помещает его в массив,Каждая итерация должна создать и 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 is:
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() на тестовой странице, я определил, что на первой итерации, до первой 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
Это невероятно, я знаю.Но перед тем, как составить этот вопрос, я тестировал его на тестовой странице десятки раз, всегда с таким результатом.
Все это в прямом эфире на странице Регистрация в тестовой конференции 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>