В JSFiddle у вас есть прослушиватель событий submit, который работает, но не мешает отправке формы.Итак, после выполнения buildClasses вы создали classes объект, но все еще отправка формы в процессе.Поскольку значение iframe
https://fiddle.jshell.net/_display/
, отправка формы отправляет данные формы на этот адрес (например, данные формы
fname:
lname:
email:
select:
select: unsure
select: unsure
)
Но, конечно,JSFiddle понятия не имеет, что это значит.Предположительно, fiddle.jshell.net использует отправку форм для чего-то другого (вероятно, он ожидает данные, которые могут быть использованы для создания ответного документа iframe), и те представления форм, которые он ожидает , должны иметьtitle key.
Аналогично, в редакторе фрагментов Stack Overflow вы отправляете эти данные в https://stacksnippets.net/js, но stacksnippets не ожидает такие данные формы - он ожидает только те данные, которые могут быть использованысоздать фрагмент (в частности, ключи: HTML, CSS, JS, Babel и Console).Таким образом, он выдает сообщение об ошибке.
Это просто результат отправки формы в онлайн-редакторе Javascript, который не ожидает такой формы.На вашем реальном сайте это не должно иметь значения, если ваш сайт настроен для правильной обработки отправленных форм.
Если вы хотите продемонстрировать в онлайн-редакторе Javascript, что отправка формы предоставит правильные данные без фактической отправки формы, затем просто запретите отправку формы с помощью preventDefault где-нибудь в обработчике submit, например
document.addEventListener("submit", (e) => {
var formData = $('form').serializeArray();
console.log('log formData : ', formData);
var classes = buildClasses(formData);
// updageTable(classes);
console.log('log classes after build : ', classes);
e.preventDefault();
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
}); // end arrow fn callback on event listener
$(document).ready(function() {
document.addEventListener("submit", (e) => {
var formData = $('form').serializeArray();
console.log('log formData : ', formData);
var classes = buildClasses(formData);
// updageTable(classes);
console.log('log classes after build : ', classes);
e.preventDefault();
}); // end arrow fn callback on event listener
}); // end doc.ready
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('log classes post-def : ', 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 || fd[i].value == 'unsure') {} else {
ts = timeslots[i - startIndex];
rm = fd[i].value;
console.log('i, 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>
<head>
<title>jdfidde for buildClasses</title>
</head>
<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">unsure</option>
<option value="A">room A</option>
<option value="B">room B</option>
</select>
</label>
<label>10:30 Classes
<select name="select">
<option value="unsure">unsure</option>
<option value="A">room A</option>
<option value="B">room B</option>
</select>
</label>
</div>
<div>
<input type="submit" value="submit form">
</div>
</form>
PS: Есть ли способ скрыть код фрагмента, чтобы он не отображался в вопросе по умолчанию?
Установите флажок «Скрыть фрагмент по умолчанию», как я делал для приведенного выше фрагмента:
