在HTML post到PHP表单:当按钮类型=按钮，如何传递值 - in html post to php form: when button type = button, how to pass value?

您正在为一个对象设置一些属性值，例如窗体中的颜色、大小、重量等。如果在希望将所有信息发布到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="button"的意义在于你可以将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:

choose colour: <button type="button" class="colour" value="green">Green</button>  
               <button type="button" class="colour" value="blue">Blue</button>   
  choose size: <button type="button" class="size" value="big">Big</button> 
               <button type="button" class="size" value="small">Small</button>    
 <button id='submit' type="button">Submit</button>

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();
    });
});

jsFiddle

正如Quentin所说，按钮对于在选项之间进行选择是没有用的，但是你评论说你想要一些可定制的图像…

选项1:在表或列表中使用<label for="id"></label>和单选按钮。

<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>

这是我创建的演示小提琴(刚刚注册)