在HTML中以php形式發布：當按鈕類型=按鈕時，如何傳遞值？

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>

這是我創建的演示小提琴（剛剛注冊）