在html中发布到php表单：当button type = button时，如何传递值？

您正在为某个对象设置一些属性值，例如表单中的颜色，大小，重量等。如果在希望将所有信息发布到php页面以供进一步处理之前使用按钮指定这些值 - 如果按钮本身没有提交表单，您将如何获得传递给php的值？在html中发布到php表单：当button type = button时，如何传递值？

例如：

<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 

?>

非常感谢。

来源

2014-06-15 user2912230

type="button"的要点是您可以将JavaScript连接到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>

来源

2014-06-15 09:11:49 Quentin

谢谢昆廷 - 问题是，我不知道单选按钮将用户界面的首选选择价值。但是，我还没有研究过单选按钮是否可以定制，例如用img表示。如果是这样，他们会从您的帖子中听到最好的建议。 – user2912230

你可以使用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实现形式。

来源

2014-06-15 09:31:42 EL3PHANTEN

如昆汀说，按钮是不是选项之间选择的是有用的，但你对此有何评论要与图像定制的东西...

选项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：使用droplists与造型：

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

来源

2014-06-15 11:26:18 user3740958

在html中发布到php表单：当button type = button时，如何传递值？

回答

相关问题