Enhanced formcontrols.js

[neodigm]

Hi, I've modified the formcontrols.js snippet to create an HTML report via a data URI. Helpful in my case where I needed to share form controls with a team. I also excluded hidden elements.

(function() {

var forms = document.querySelectorAll("form");
var sMU = "

Web form audit

";
sMU += "

---

";
for (var i = 0, len = forms.length; i < len; i++) {
var tab = [ ];

sMU += "

Form: " + forms[i].id + " " + forms[i].name + "

";
sMU += "";
sMU += "";
sMU += "";
sMU += "";
sMU += "";
sMU += "";
sMU += "";
sMU += "";

console.group("HTMLForm \"" + forms[i].name + "\": " + forms[i].action);
console.log("Element:", forms[i], "\nName:    "+forms[i].name+"\nMethod:  "+forms[i].method.toUpperCase()+"\nAction:  "+forms[i].action || "null");

["input", "textarea", "select"].forEach(function (control) {
  [].forEach.call(forms[i].querySelectorAll(control), function (node) {

if (node.type != "hidden") {
sMU += "

";
sMU += "";
sMU += "";
sMU += "";
sMU += "";
sMU += "";
sMU += "";
}
tab.push({
"Element": node,
"Type": node.type,
"Name": node.name,
"Value": node.value,
"Pretty Value": (isNaN(node.value) || node.value === "" ? node.value : parseFloat(node.value))
});

  });
});

console.table(tab);
console.groupEnd();

sMU += "

Id	HTML5 Type	Name	Value	Formatted
" + node.id + "	" + node.type + "	" + node.name + "	" + node.value + "	" + (isNaN(node.value) || node.value === "" ? node.value : parseFloat(node.value)) + "

---

";
}

window.location.href = "data:text/html;charset=UTF-8,"+sMU;

})();

[neodigm]

Wow, that does not read well. Try this: http://codepen.io/neodigm/pen/azRjdG.js

[scouserantro]

great script - very useful. many thanks!