Question

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

?>

非常感谢。

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

Answer 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来完成。

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

在html帖子到php表单：当按钮类型=按钮时，如何传递值？

3 个答案: