在html中發佈到php表單：當button type = button時，如何傳遞值？

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。它不旨在將值發送到服務器。

提交按鈕是，但你想讓用戶從多個集合中選擇，而不是隻有一個，所以你也不能使用這些。

雖然您使用帶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

如昆汀說，按鈕是不是選項之間選擇的是有用的，但你對此有何評論要與圖像定製的東西...

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