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 commented 9 years ago

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

scouserantro commented 9 years ago

great script - very useful. many thanks!

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[neodigm]

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

[scouserantro]

great script - very useful. many thanks!