JSFiddle - React, Tailwind, and code Playground

by mrcatoff

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<form method="POST" action="">
		<div><input type="checkbox" name="checkbox_1"> - checkbox_1</div>
		<div><input type="checkbox" name="checkbox_2" checked="true"> - checkbox_2</div>
		<div><input type="password" name="password_1" value="qwerty"> - password_1</div>
		<div><input type="radio" name="radio" checked="true" value="RADIO_1"> - radio</div>
		<div><input type="radio" name="radio" value="RADIO_2"> - radio</div>
		<div><input type="radio" name="radio" value="RADIO_3"> - radio</div>
		<div><input type="text" name="text_1" value="Hello World"> - text_1</div>
		<div><button type="submit">All data to console</button></div>
	</form>
</body>
</html>

JavaScript

// Сама форма
let FORM_DATA_ELEMENTS = document.getElementsByTagName("form")[0].elements;
// Количество элементов
let FORM_DATA_COUNT = FORM_DATA_ELEMENTS.length;
// Стартовая позиция (отсчет всегда с 0)
let FORM_DATA_ITERATOR = 0;
let FORM_DATA_OBJECT = new Object();

// Событие нажатия на кнопку
function FormOnSumbitEvent(event) {
	// Блокировка стандартного обработчика события нажатия на кнопку,
	// инными словами фикс с переходом на страницу которая указана в
	// атрибуте action="", вся суть заключается в том что бы запретить
	// исполнение заранее описаного события, которое записано уже до нас
	// что бы тут обработалосб наше событие которое мы написали
	event.preventDefault();

	for(FORM_DATA_ITERATOR; FORM_DATA_ITERATOR < FORM_DATA_COUNT; FORM_DATA_ITERATOR++) {
		// Если поле является input (<input ... />)
		// То мы добавляем его в объект
		if(FORM_DATA_ELEMENTS[FORM_DATA_ITERATOR].localName == "input") {
			// Если элемент является полем типа checkbox
			// type="checkbox" то он может принимать значения true, false
			// checked, собственно тут это и заносится в объект
			if(FORM_DATA_ELEMENTS[FORM_DATA_ITERATOR].getAttribute('type') == "checkbox") {
				// Добавляем в наш объект название поля name="checkbox_1" и его значение
				// true или false, атрибут ELEMENT.checked
				FORM_DATA_OBJECT[FORM_DATA_ELEMENTS[FORM_DATA_ITERATOR].getAttribute('name')] = FORM_DATA_ELEMENTS[FORM_DATA_ITERATOR].checked;
			// Если поле типа radio (type="radio") то значение должно вносится то, которое сейчас выбрано
			// Проверяем если поле выбрано (ELEMENT.checked) то вносим его в наш объект и записываем его
			// значение (ELEMENT.value)
			} else if(FORM_DATA_ELEMENTS[FORM_DATA_ITERATOR].getAttribute('type') == "radio") {
				if(FORM_DATA_ELEMENTS[FORM_DATA_ITERATOR].checked) {
					FORM_DATA_OBJECT[FORM_DATA_ELEMENTS[FORM_DATA_ITERATOR].getAttribute('name')] = FORM_DATA_ELEMENTS[FORM_DATA_ITERATOR].value;
				}
			// Если поле другого типа, то просто записываем его в...