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:

  <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> 
    <div id='output1'></div>
    <script type="text/javascript" language="javascript"> 

        // formbuilder.cgi outputs a JSON document
        var m_opts = {
            target:   '#output1',
            dataType: 'json'


    <form id="myform"></form>    <!-- The FORM ist built here -->

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.",
               "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. ;-)

Flattr this
HTML, JavaScript, and jQuery :: 28 Jul 2011 :: e-mail


blog comments powered by Disqus