title: POST the values of several html <input type='button'>
body: <p>I have a html form with several <code>&lt;input type='button' value='1'&gt;</code> buttons. Each button has a predefined value of '1'.
  Example:
  I have two buttons next to each other, one represents morning and one represents afternoon. I want the user to chose either of them, or both, by clicking the buttons. A javascript function then changes the value and the background colour of each button through <code>&lt;input type='button'... onclick=change(this) &gt;</code> and the JS function <code>function change(button) { button.value='2';button.style.background='red'}</code></p>
  
  <p>This is all working fine and I see all buttons with the respective colours and values, depending on whether the user clicked them or not. Now I have a final submit button in the form and I need to get the values of each button.</p>
  
  <p>I tried <code>&lt;input type='button' ... name='buttons[]'&gt;</code> to later get an array from $_POST['buttons'], but type='button' does not seem to POST any values. I also tried the <code>&lt;button....&gt;</code> tags, no success.
  Also I DO NOT want each button to be of <code>type=submit</code>.</p>
  
  <p>What is the best way to get  all button values after the user clicks the final submit button of the form ?</p>
  
  <p>Thanks a lot</p>
  
  <p>p.s. I have already tried to create a hidden input field <code>&lt;input name='hid[]' type='hidden'&gt;</code> and then in the JS function <code>{var hid=document.getElementById('hidid'); hid.value='2';}</code> but this does not seem to add the value to the POST array hid[]</p>
  
  <p>Here's the full code:</p>
  
  <p>HTML: -</p>
  
  <pre><code>&lt;form class='productform' method='post' id='resform' action='viewDate.shtml'&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input name='buttons[]' id='buttonid' onclick=change(this) value='1'&gt;Morning&lt;/input&gt;
       &lt;/td&gt;
       &lt;td&gt;
        &lt;input name='hid[]' id='buttonidhid' value='1' type='hidden'&gt;&lt;/input&gt;
       &lt;/td&gt;
       &lt;td&gt;
         &lt;input name='buttons[]' id='buttonid' onclick=change(this) value='1'&gt;Afternoon&lt;/input&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input name='hid[]' id='buttonidhid' value='1' type='hidden'&gt;&lt;/input&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
   &lt;/table&gt;
   &lt;input type='submit' name='submitbutton' value='Save'&gt;&lt;/input&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Js: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function change(button) {
      var hid=getElementById('buttonidhid');
       if(button.value=='1') {
          button.value='2';
          button.style.background='red';
          hid.value='2';
        }
      }
  &lt;/script&gt;
  </code></pre>