Проверка различных типов входных данных формы с помощью критериев

Я хочу получить ответы на форму при отправке и проанализировать их в JSON. Это работает неплохо, но мне нужна некоторая проверка перед отправкой данных. Я пробовал много вариантов приведенного ниже фрагмента, но все еще застрял.

Шаги:

  1. Запретить событие по умолчанию при "отправке"
  2. Получить форму
  3. Перебирать элементы формы
  4. Удалите пустые предметы и их ценность
  5. Если флажок установлен: значение = true
  6. Храните правильные элементы в данных
  7. Вернуть данные

Почему-то я не могу приступить к работе с шагами 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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
33
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что .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)

Другие вопросы по теме