The gatekeeper of reality is
quantified imagination.
quantified imagination.
Extract Form Elements [Go Back]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
let extractedFormElements = [];
function getFormElementIndexed(frmElementName) {
let result = false;
if (extractedFormElements.length > 0) {
for (let o = 0; o < extractedFormElements.length; o++) {
var fElement = extractedFormElements[o];
for (let key of Object.keys(fElement)) {
if (frmElementName == key.toString()) { result = true; break; }
}
if (result == true) { break; }
}
}
return result;
}
function getJsonFormElements() {
let result = new String();
if (extractedFormElements.length > 0) {
/* Convert array of objects [{"a":"value"},{"b":"value"}] to json associative form array {"a":"value","b":"value"} */
let convertedData = JSON.stringify(extractedFormElements);
let jFormConvert = convertedData.replace(/[\{\}]/gi, "");
jFormConvert = jFormConvert.replace(/\[/gi, "{");
result = jFormConvert.replace(/\]/gi, "}");
}
return result;
}
function getFormElements(targetBlock) {
extractedFormElements = [];
let controlBlock = document.getElementById(targetBlock);
let cBlockElements = controlBlock.querySelectorAll("*");
let rBlockElements = controlBlock.querySelectorAll("input[type=radio]:checked");
let tBlockElements = controlBlock.querySelectorAll("input[type=checkbox]:checked");
cBlockElements.forEach(cElement => {
let cTagId = new String();
let cTagName = new String();
let cTagType = new String();
let cTagValue = new String();
let cTagFormElementName = new String();
if (cElement.tagName) { cTagName = cElement.tagName.toLowerCase().trim(); }
if (cElement.hasAttribute("name")) { cTagFormElementName = cElement.getAttribute("name"); }
if (cElement.hasAttribute("id")) { cTagId = cElement.getAttribute("id"); }
if ('getAttribute' in cElement) {
if (cElement.getAttribute("type") !== null) { cTagType = cElement.getAttribute("type").toLowerCase().trim(); }
}
if (cTagFormElementName.length > 0 && cTagName != "label" && getFormElementIndexed(cTagFormElementName) == false) {
if (cTagName == "input") {
if (cTagType == "text" || cTagType == "hidden") {
if (document.getElementById(cTagId) && document.getElementById(cTagId).value.trim().length > 0) { cTagValue = document.getElementById(cTagId).value; }
else if (cElement.hasAttribute("value")) { cTagValue = cElement.getAttribute("value"); }
}
else if (cTagType == "radio") {
let radioCollection = new String();
rBlockElements.forEach(radElement => {
if (radElement.hasAttribute("name")) {
let radName = radElement.getAttribute("name");
let radValue = radElement.getAttribute("value");
if (cTagFormElementName == radName) {
if (radioCollection.length > 0) { radioCollection = radioCollection.concat(",", radValue); }
else { radioCollection = radValue; }
}
}
});
cTagValue = radioCollection;
}
else if (cTagType == "checkbox") {
let checkboxCollection = new String();
tBlockElements.forEach(txtElement => {
if (txtElement.hasAttribute("name")) {
let txtName = txtElement.getAttribute("name");
let txtValue = txtElement.getAttribute("value");
if (cTagFormElementName == txtName) {
if (checkboxCollection.length > 0) { checkboxCollection = checkboxCollection.concat(",", txtValue); }
else { checkboxCollection = txtValue; }
}
}
});
cTagValue = checkboxCollection;
}
}
else if (cTagName == "textarea") {
if (document.getElementById(cTagId) && document.getElementById(cTagId).value.trim().length > 0) { cTagValue = document.getElementById(cTagId).value; }
else if (cElement.textContent.trim().length > 0) { cTagValue = cElement.textContent; }
}
else if (cTagName == "select") {
if (cElement.hasAttribute("multiple")) {
var selectCollection = new String();
if (cElement.selectedOptions) {
let selectedItems = cElement.selectedOptions;
for (let so = 0; so < selectedItems.length; so++) {
let sboxValue = selectedItems[so].value;
if (selectCollection.length > 0) { selectCollection = selectCollection.concat(",", sboxValue); }
else { selectCollection = sboxValue; }
}
cTagValue = selectCollection;
}
}
else { cTagValue = cElement.options[cElement.selectedIndex].value; }
}
if (cTagFormElementName.length > 0) {
if (cTagValue.length == 0) { cTagValue = ""; }
extractedFormElements.push({[cTagFormElementName]:cTagValue});
}
}
});
/* Convert to JSON */
let jsonFormConversion = getJsonFormElements();
document.getElementById("showElements").innerText = jsonFormConversion;
}
function filterDataBlock(data) {
let result = new String();
let tmpData = data.replace(/"/gi, """);
tmpData = tmpData.replace(/\[/gi, "[");
tmpData = tmpData.replace(/\]/gi, "]");
tmpData = tmpData.replace(/[{]/gi, "{");
tmpData = tmpData.replace(/[}]/gi, "}");
tmpData = tmpData.replace(/:/gi, ":");
result = tmpData.replace(/,/gi, ",");
return result;
}
function lookAtJsonOfForm(target) {
var frm = document.getElementById(target);
var formData = new FormData(frm);
var forJson = JSON.stringify(Object.fromEntries(formData));
document.getElementById("showElements").innerText = forJson;
}
</script>
</head>
<body>
<form id="peekaboo" name="peekaboo">
<table border="1" width="100%">
<tbody>
<tr id="htmlWithFormElements">
<td width="33%">
<!-- some comment -->
<input type="hidden" name="hidden1" id="hidden1" value="hidden1value" />
<input type="text" name="text1" id="text1" value="text1value" /><br />
<textarea name="textbox1" id="textbox1" cols="30" rows="2">textbox1value</textarea>
<div></div>
</td>
<td width="33%">
<select name="select1" id="select1">
<option value="select1valueA">select1valueAtxt</option>
<option value="select1valueB">select1valueBtxt</option>
</select> Single Select<br />
<select name="select2" id="select2" multiple>
<option value="select2valueC">select2valueCtxt</option>
<option value="select2valueD">select2valueDtxt</option>
</select> Multiple Select
</td>
<td width="33%">
<input type="radio" name="radio1" id="radio1a" value="radio1valueA" /> radio1valueA<br />
<input type="radio" name="radio1" id="radio1b" value="radio1valueB" /> radio1valueB
<hr />
<input type="checkbox" name="checkbox1" id="checkbox1a" value="checkbox1valueA" /> checkbox1valueA<br />
<input type="checkbox" name="checkbox1" id="checkbox1b" value="checkbox1valueB" /> checkbox1valueB
</td>
</tr>
</tbody>
</table>
<input type="button" value="Get Form Elements Using getFormElements()" onclick="javascript:getFormElements('htmlWithFormElements');" />
<br /><span style="font-size: .75em;">This handles multiple selects, checkboxes checked under the same name and returns empty string for form elements with no value.</span>
<br /><br />
<input type="button" value="Get Form Elements Using Standard FormData()" onclick="javascript:lookAtJsonOfForm('peekaboo');" />
<br /><span style="font-size: .75em;">Without alteration using standard functionality this returns a single select value, checkbox value under the same name and does not include form elements with no value.</span>
</form>
<br /><br />
<strong>Results:</strong><br />
<textarea id="showElements" cols="50" rows="10"></textarea>
</body>
</html>
