title: fill a fields in forms with button onclick
body: <p>I got a problem I need to fill two fields in a form with diffrent values and I would like to do that with an button onClick function. </p>
  
  <p>I genererat buttons and the output looks like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button class="btn btn-primary" type="button" onclick="fillsquare(test, 1)"&gt;1&lt;/button&gt;
  &lt;button class="btn btn-primary" type="button" onclick="fillsquare(test2, 3)"&gt;1&lt;/button&gt;
  </code></pre>
  
  <p>Now I want to fill my form with the values 
  the first value I want to be placed in the first <code>field id="areaname_fill"</code> and the secound value should fill the <code>field id="squarename_fill"</code>. </p>
  
  <p>Just to clarify, If I click on the first button 
  <code>id="areaname_fill"</code> should set the value to <code>"Test"</code> AND 
  <code>id="squarename_fill"</code> should set the value to <code>1</code>.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="form-group"&gt;
      &lt;label&gt;fyll i område&lt;/label&gt;
      &lt;input type="text" name="areaname_fill" id="areaname_fill" class="form-control" value="" /&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label&gt;fyll i rutans nummer&lt;/label&gt;
      &lt;input type="text" name="squarename_fill" id="squarename_fill" class="form-control" value="" /&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>I came up with this JS but I can't get it to work, any ides? </p>
  
  <pre class="lang-js prettyprint-override"><code>function fillsquare(area,square)
  {
      var area = area;
      var square = square;
  
      document.getElementById(areaname_fill).value = area;
      document.getElementById(squarename_fill).value = square;
  }
  </code></pre>