POST the values of several html <input type='button'>

Question

I have a html form with several <input type='button' value='1'> 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 <input type='button'... onclick=change(this) > and the JS function function change(button) { button.value='2';button.style.background='red'}

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.

I tried <input type='button' ... name='buttons[]'> to later get an array from $_POST['buttons'], but type='button' does not seem to POST any values. I also tried the <button....> tags, no success. Also I DO NOT want each button to be of type=submit.

What is the best way to get all button values after the user clicks the final submit button of the form ?

Thanks a lot

p.s. I have already tried to create a hidden input field <input name='hid[]' type='hidden'> and then in the JS function {var hid=document.getElementById('hidid'); hid.value='2';} but this does not seem to add the value to the POST array hid[]

Here's the full code:

HTML: -

<form class='productform' method='post' id='resform' action='viewDate.shtml'>
  <table>
    <tr>
      <td>
        <input name='buttons[]' id='buttonid' onclick=change(this) value='1'>Morning</input>
     </td>
     <td>
      <input name='hid[]' id='buttonidhid' value='1' type='hidden'></input>
     </td>
     <td>
       <input name='buttons[]' id='buttonid' onclick=change(this) value='1'>Afternoon</input>
    </td>
    <td>
      <input name='hid[]' id='buttonidhid' value='1' type='hidden'></input>
    </td>
  </tr>
 </table>
 <input type='submit' name='submitbutton' value='Save'></input>
</form>

Js:

<script type="text/javascript">
    function change(button) {
    var hid=getElementById('buttonidhid');
     if(button.value=='1') {
        button.value='2';
        button.style.background='red';
        hid.value='2';
      }
    }
</script>

Answer 1

You could use radio/option buttons and do some very nice styling.

See:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ http://www.sitepoint.com/15-jquery-radio-button-checkbox-style-plugins/ http://www.tutorialrepublic.com/faq/how-to-create-custom-radio-buttons-using-css-and-jquery.php http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/

Some really nice ones:

http://www.dynamicdrive.com/style/csslibrary/item/css3_oval_switch_checkboxes/ http://www.webdesignerdepot.com/2011/07/css-buttons-tutorials-and-examples/

Along your lines:

http://viralpatel.net/blogs/css-radio-button-checkbox-background/

Below taken from "Last Link":

/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=radio] {
    display:none; 
    margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label { 
   background-image: none;
    background-color:#d0d0d0;
}

Answer 2

Try to add a name to your buttons :

<input type='button' value='1' name='button1'>

That way, you'll be able to get the values of your buttons using $_POST['button1']