在 html 中发布到 php 表单：当按钮类型 = 按钮时，如何传递值？答案

【问题标题】：in html post to php form: when button type = button, how to pass value?在 html 中发布到 php 表单：当按钮类型 = 按钮时，如何传递值？
【发布时间】：2014-08-05 08:38:21
【问题描述】：

您正在为一个对象设置一些属性值，例如表单中的颜色、大小、重量等。如果在希望将所有信息发布到 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

?>

非常感谢。

【问题讨论】：

标签： php html button input submit

【解决方案1】：

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>

【讨论】：

谢谢昆汀——问题是，我不确定单选按钮是否会成为 UI 选择值的首选。但是，我还没有研究是否可以自定义单选按钮，例如用 img 表示。如果是这样，它们从您的帖子中听起来像是最好的建议。

【解决方案2】：

您可以为此使用 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

这也可以只用 javaScript 来完成。

【讨论】：

【解决方案3】：

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

Here's a demo fiddle I created (just signed up)

【讨论】：