在html post to php表单中：当button type=button时，如何传递值？

您正在为对象设置一些属性值，例如窗体中的颜色、大小、重量等。如果在希望将所有信息发布到php页面进行进一步处理之前使用按钮指定这些值，那么如果按钮本身没有提交表单，您如何将这些值传递给php

例如：

<form action="processgivenvalues.php" method="post">                        

choose colour: <button type="button" name="colour" value="green"></button>  
               <button type="button" name="colour" value="blue"></button>   
  choose size: <button type="button" name="size" value="big"></button> 
               <button type="button" name="size" value="small"></button>    

<input type="submit">

在php页面上：

<?php

 echo You specified:
 echo $size;
 echo $frame

?>

非常感谢。

type=按钮的意义在于它是一个可以连接JavaScript的东西。它不是为向服务器发送值而设计的

提交按钮是，但您希望让用户从多个集合中选择，而不是仅从一个集合中选择，因此您也不能使用这些按钮

当您在JavaScript中使用按钮来生成/更新具有所需值的隐藏输入时，实际上应该只使用单选按钮。它们的设计目的是让用户从组中选择一个项目

<form action="processgivenvalues.php" method="post">                        

    <fieldset>
        <legend>Colour</legend>
        <label>
            <input type="radio" name="colour" value="green"> Green
        </label>
        <label>
            <input type="radio" name="colour" value="blue"> Blue
        </label>
    </fieldset>

    <fieldset>
        <legend>Size</legend>
        <label>
            <input type="radio" name="size" value="big"> Big
        </label>
        <label>
            <input type="radio" name="size" value="small"> Small
        </label>
    </fieldset>

    <input type="submit">

</form>

---

您可以使用jQuery来实现这一点

html:

jQuery：

你在跑步的时候做表格

$(document).ready(function(){
    window.size = '';
    window.colour = '';

    $(".colour").click(function() { 
        window.colour = $(this).val();
    }); 

    $(".size").click(function() {   
        window.size = $(this).val();
    }); 

    $("#submit").click(function() {
        if(window.size == '' || window.colour == ''){
            return alert('Choose colour and Size');
        }
        var form = $('<form></form>');
        $(form).hide().attr('method','post').attr('action',"processgivenvalues.php");

        var input1 = $('<input type="hidden" />').attr('name',"size").val(window.size);
        var input2 = $('<input type="hidden" />').attr('name',"colour").val(window.color);
        $(form).append(input1);
        $(form).append(input2);
        $(form).appendTo('body').submit();
    });

});

---

这也可以只使用javaScript来完成。

正如昆廷所说，按钮对于在选项之间进行选择是没有用的，但是您会评论说您想要一些可以用图像自定义的东西

选项1：与表或列表中的单选按钮一起使用

<table>
 <tbody>
  <tr>
   <td style="background-color: green;">
    <label for="green">
    <input name="colour" value="green" id="green" type="radio">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </label>
   </td>
  </tr>
  <tr>
   <td style="background-color: blue;">
    <label for="blue">
    <input name="colour" value="blue" id="blue" type="radio">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </label>
   </td>
  </tr>
  <tr>
   <td>
    <label for="big">
    <input name="size" value="big" id="big" type="radio">
    <big>Big</big>
    </label>
   </td>
  </tr>
  <tr>
   <td>
    <label for="small">
    <input name="size" value="small" id="small" type="radio">
    <small>Small</small>
    </label>
   </td>
  </tr>
 </tbody>
</table>

选项2：使用带有样式的雾滴：

<select name="colour2">
 <option value="0">Select a color</option>
 <option value="green" style="background: green;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
 <option value="blue" style="background: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
</select>
<br>
<select name="size2">
 <option value="0">Select a size</option>
 <option value="big" style="font-size: 16px;">Big</option>
 <option value="small" style="font-size: 12px;">Small</option>
</select>

---

谢谢你，昆汀-问题是，我不确定单选按钮是否是选择值的首选UI。然而，我还没有研究单选按钮是否可以定制，例如用img表示。如果是这样的话，从你的帖子听起来，他们是最好的建议。

<select name="colour2">
 <option value="0">Select a color</option>
 <option value="green" style="background: green;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
 <option value="blue" style="background: blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
</select>
<br>
<select name="size2">
 <option value="0">Select a size</option>
 <option value="big" style="font-size: 16px;">Big</option>
 <option value="small" style="font-size: 12px;">Small</option>
</select>