title: Pass data from a JavaScript array to an HTML form
body: <p>I am trying to learn JavaScript and I came across a practice problem in a book I purchased that I cannot seem to crack. The task is to flesh out a javascript formBuilder function to generate HTML forms dynamically from a JavaScript array. I have copied the code from the book onto a CodePen page for visual and testing purposes.</p>
  
  <p>CodePen: <a href="http://codepen.io/anon/pen/gpwZMX" rel="nofollow">http://codepen.io/anon/pen/gpwZMX</a> </p>
  
  <p>HTML sample:</p>
  
  <pre><code>&lt;div&gt;
    &lt;button data-sample='1'&gt;Run 1&lt;/button&gt;
    &lt;button data-sample='2'&gt;Run 2&lt;/button&gt;
    &lt;button data-sample='3'&gt;Run 3&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
  &lt;div id='spec'&gt;
    &lt;i&gt;This div will display the currently-processed spec&lt;/i&gt;
  &lt;/div&gt;
  &lt;br&gt;Output:
  &lt;div id='result'&gt;
    &lt;i&gt;I sure wish I had a cool html form in me...&lt;/i&gt;
  &lt;/div&gt;
  
  &lt;!--here are some test cases in docblock form--&gt;
  &lt;div class='testcase' id='1'&gt;
    /** Comment Form
       * Make a comment on the blog post!
       * @param  string[100] title
       * @param  email email
       * @param  text body
       * @param  bool subscribe Email me when someone comments on my comment!
       */
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript sample:</p>
  
  <pre><code>var samples = [
    {
      title:"Comment Form",
      desc:"Make a comment on the blog post!",
      params:[
        { 
          type: 'text',
          max_length: 100,
          name: 'title'
        },
        {
          type: 'email',
          name: 'email'
        },
        {
          type:'textarea',
          name:'body'
        },
        {
          type:'checkbox',
          name:'subscribe',
          label:'mail me when someone comments on my comment!'
        }
      ]
    }]
  </code></pre>
  
  <p>formBuilder sample:</p>
  
  <pre><code>//builds an HTML form using all information present in `spec` and places the resulting HTML in jquery element `$el`
  function formBuilder(spec,$el){
    $el.html("&lt;i&gt;I still wish I had a cool html form in me...&lt;/i&gt;");
  }
  
  
  $("button").on("click",function($e){
    var specIndex = $($e.target).data('sample');
    var specData = samples[specIndex-1];
  
    $("#spec").html("Sample spec "+(specIndex)+" looks like: &lt;br&gt;"+JSON.stringify(specData));
  
    formBuilder(specData, $("#result"));
  });
  </code></pre>