javascript - POST 几个 html <input type ='button' > 的值

Question

我有一个 html 表单，其中有几个 <input type='button' value='1'>纽扣。每个按钮都有一个预定义值“1”。 例子: 我有两个相邻的按钮，一个代表早上，一个代表下午。我希望用户通过单击按钮来选择其中一个或两者。然后 JavaScript 函数通过 <input type='button'... onclick=change(this) > 更改每个按钮的值和背景颜色。和 JS 函数 function change(button) { button.value='2';button.style.background='red'}

这一切工作正常，我看到所有按钮都有各自的颜色和值，具体取决于用户是否单击它们。现在我在表单中有一个最终提交按钮，我需要获取每个按钮的值。

我试过<input type='button' ... name='buttons[]'>稍后从 $_POST['buttons'] 获取数组，但 type='button' 似乎没有 POST 任何值。我也尝试了<button....>标签，没有成功。 另外，我不希望每个按钮都是 type=submit .

用户单击表单的最终提交按钮后获取所有按钮值的最佳方法是什么？

非常感谢

附:我已经尝试创建隐藏输入字段 <input name='hid[]' type='hidden'>然后在JS函数{var hid=document.getElementById('hidid'); hid.value='2';}中但这似乎没有将值添加到 POST 数组 hid[]

完整代码如下:

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

您可以使用单选/选项按钮并做一些非常漂亮的样式。

参见:

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/

一些非常好的:

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

按照你的思路:

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

以下摘自“最后一个链接”:

/*
  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;
}