JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<form id="form">
    <input type="text" name="first_name" value="John">
    <input type="text" name="last_name" value="Doe">
    <input type="radio" value="male" name="gender" id="male">
    <label for="male">Male</label>
    <input type="radio" value="female" name="gender" id="female" checked>
    <label for="female">Female</label>
    <input type="radio" value="other" name="gender" id="other">
    <label for="other">Other</label>
</form>

JavaScript

;const form = document.querySelector('#form');
function getFormAsStruct(fobj) {    var struct = new Object();   var ft = "";   var fv = "";  var fn = "";  var els = ""; for(var i = 0;i < fobj.elements.length;i++){	els = fobj.elements[i];   ft = els.title;   fv = els.value;   fn = els.name; switch(els.type)	{ 		case "text":   case "hidden":   case "password":   case "textarea":		if(encodeURI(ft) == "required" && encodeURI(fv).length < 1)	{   alert('\''+fn+'\' is a required field, please complete.');	els.focus(); return false;		}  		struct[fn] = fv;		break; 		case "checkbox":   	case "radio":  	if(els.checked)		struct[fn] = fv;	break; 	case "select-one": 	struct[fn] = els.options[els.selectedIndex].value; 	 break; 	} }   return struct; }
console.log(getFormAsStruct(form));