There are a lot of ways to create HTML forms on the fly, and when I say a lot, I mean alot. :-)
I’m particularly enjoying one method which creates a HTML form on the fly in the browser, after I give it a JSON object to munch on.
I’m using jQuery::dForm, a jQuery plugin that allows me to create HTML forms from JavaScript objects, and thus also from JSON. jQuery::dForm integrates with a number of plugins that allow me to have form validation on a per-field level, AJAX form submission, etc.
Here’s a small example running in a Web browser:
The Web page the browser is showing is this one:
<html>
<head>
<title>New host</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.validate.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.form.js"></script>
<script language="javascript" type="text/javascript" src="jquery.dform-0.1.3.min.js"></script>
</head>
<body>
<div id='output1'></div>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
// formbuilder.cgi outputs a JSON document
$("#myform").buildForm('formbuilder.cgi');
var m_opts = {
target: '#output1',
dataType: 'json'
};
$('#myform').ajaxForm(m_opts);
});
</script>
<form id="myform"></form> <!-- The FORM ist built here -->
</body>
</html>Yes, that’s it.
I’ve indicated in that source, where the form will be placed. The form itself, is created
on-the-fly by jQuery::dForm from the following JSON. (If the JSON objects
don’t look as though they’re correctly ordered, it is due to the fact that I
create this JSON dynamically with a custom program formbuilder.cgi.)
{
"ajax" : {
"target" : "#output1"
},
"elements" : [
{
"elements" : [
{
"caption" : "IP Address",
"name" : "ip",
"type" : "text",
"placeholder" : "e.g. 192.168.1.1",
"validate" : {
"required" : true
}
},
{
"caption" : "HW Address",
"name" : "mac",
"type" : "text",
"validate" : {
"required" : true,
"remote" : "checkmac.php"
}
},
{
"options" : {
"rhel56" : "RHEL 5.6",
"rhel61" : "RHEL 6.1",
"sles11" : "SLES 11",
"solaris10" : "Solaris 10"
},
"caption" : "Operating system",
"name" : "os",
"type" : "select"
}
],
"caption" : "New host",
"type" : "fieldset"
},
{
"value" : "Save",
"type" : "submit"
}
],
"action" : "values.php",
"method" : "post"
}I’m churning out Web forms at an incredible rate. ;-)