Я хочу получить ответы на форму при отправке и проанализировать их в JSON. Это работает неплохо, но мне нужна некоторая проверка перед отправкой данных. Я пробовал много вариантов приведенного ниже фрагмента, но все еще застрял.
Шаги:
Почему-то я не могу приступить к работе с шагами 4 и 5 одновременно, каждый раз, когда я заставляю один из них работать, я накручиваю другой.
В этом фрагменте флажок работает так, как задумано, а текстовое поле - нет:
Если бы кто-нибудь мог указать мне правильное направление с помощью операторов if / else или чего-то подобного, это было бы очень признательно.
document.addEventListener('DOMContentLoaded', function(){
var data = {};
var formToJSON = function formToJSON(form) {
var data = {};
for (var i = 0; i < form.length; i++) {
var item = form[i];
//looking for checkbox
if (item.value = = "") {
continue;
}
else {
if (item.checked == false) {
data[item.name] = false;
}
else {
data[item.name] = item.value;
}
}
}
return data; };
var dataContainer = document.getElementsByClassName('results__display')[0];
form = document.getElementById('formular').querySelectorAll('input,select,textarea');
butt = document.getElementById('knopfabsenden');
butt.addEventListener('click', function (event) {
event.preventDefault();
handleFormSubmit(form = form);
});
var handleFormSubmit = function handleFormSubmit(event) {
var data = formToJSON(form);
dataContainer.textContent = JSON.stringify(data, null, " ");
}
}, false);
<div id = "formular">
<label class = "formular__label" for = "machineName">Textfield Test</label>
<input class = "formular__input formular__input--text" id = "machineNumber" name = "machineNumber" type = "text"/>
<br>
<input class = "formular__input formular__input--checkbox" id = "checkTest" name = "checkTest" type = "checkbox" value = "true"/>
<label class = "formular__label formular__label--checkbox" for = "checkTest">Checkbox Test</label>
<br>
<button class = "formular__button" id = "knopfabsenden" type = "submit">Submit</button>
</div>
<div class = "results">
<h2 class = "results__heading">Form Data</h2>
<pre class = "results__display-wrapper"><code class = "results__display"></code></pre>
</div>
Проблема в том, что .checked всегда будет ложным, если его не существует. Таким образом, текстовое поле получает значение false.
for (var i = 0; i < form.length; i++) {
var item = form[i];
//looking for checkbox
if (item.value == = "") {
continue;
}
else {
if (item.type === "text") {
data[item.name] = item.value;
}
else if (item.type === "checkbox"){
data[item.name] = item.checked;
}
}
}
В этом фрагменте кода я проверяю тип ввода и обрабатываю его соответствующим образом. также обратите внимание, что я использую оператор ===, а не оператор == как лучшую практику (Разница между == и === в JavaScript)