POST-able image下拉菜單

我正在使用此HTML和jQuery代碼將圖像作爲下拉菜單的選擇選項，但我不確定如何使值可以像POST使用標準文本選擇下拉菜單。被用於清單網站我正在做的代碼，所以圖像是一個對號和X.POST-able image下拉菜單

我的一個嘗試，使其POST的是增加method="POST"和onclick="<?php $checkVar01='check'; ?>或onclick="<?php $checkVar01='x'; ?>"到兩個標籤，但它本質上毫無意義，因爲它似乎只是每次輸出'x'值，即使沒有點擊標籤。我使用AJAX將值發佈到另一頁。

<table> 
     <thead> 
      <tr> 
      <th colspan="4" id="timestamp"> 
      </th> 
      </tr> 
      <tr> 
      <th>#</th> 
      <th>Subject</th> 
      <th>Status</th> 
      <th>Comments</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td>Item 1</td> 
      <td>Do something</td> 
      <td> 
       <div class="btn-group" style="margin:0px;"> 
       <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Select<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li> 
        <a href="javascript:void(0);" onclick="<?php $checkVar01='check'; ?>">OK <img src="../images/green_check.png" width="25em"/></a> 
        </li> 
        <li> 
        <a href="javascript:void(0);" onclick="<?php $checkVar01='check'; ?>">NOK <img src="../images/x.png" width="25em"/></a> 
        </li> 
       </ul> 
       </div> 
      </td> 
      <td><input id="comment01" type="text" class="form-control form-control-md" maxlength="50"></td> 
      </tr> 

<script> 

    $(".dropdown-menu li a").click(function() { 
    var selText = $(this).text(); 
    var imgSource = $(this).find('img').attr('src'); 
    var img = '<img src="' + imgSource + '" width="20em"/>'; 
    $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' ' + img + ' <span class="caret"></span>'); 
    }); 

$("#homeSubmitButton").click(function() { 
    $.ajax({ 
     type: "POST", 
     url: "../actions.php?action=submitForm", 
     data: "&checkVar01=" + <?php echo $checkVar01; ?> + "&comment01=" + $("#comment01").val(), 
     success: function(result) { 
     alert("Your checksheet has been submitted!"); 
     } 
    }) 
    })

來源

2017-05-30 Zallus

StackOverflow的是不是一個意見的論壇，它是一個代碼Q＆A網站。您應該首先嚐試執行POST並顯示您的嘗試，以便我們可以幫助您解決問題。 – Soviut

我猜想還不夠公平。我沒有包括我的嘗試，因爲我覺得他們走錯了路，但也許我可以添加一些東西。 – Zallus

是的，絕對包括你最好的嘗試，你想要它做什麼以及它實際上在做什麼。當你知道你在處理什麼時，給予幫助會更容易。 – Soviut

HTML已經有一個複選框表單元素。您可以使用:checked僞選擇符來設置複選框（和單選按鈕）的樣式，以幾乎任何您想要的方式顯示。

https://paulund.co.uk/style-checkboxes-with-css

由於您使用的真正的複選框，就可以把它們放在適當的形式中。然後您可以正常提交該表格，或者通過AJAX request將這些值發送到您的服務器。

來源

2017-05-30 23:52:45 Soviut

我終於得到這個通過改變標籤href和AJAX的POST數據如下工作： <a href="javascript: var checkVar01='check';"><img src="../images/green_check.png" width="25em"/></a> data: "&checkVar01=" + checkVar01 + "&comment01=" + $("#comment01").val(),

來源

2017-05-31 18:55:32 Zallus

POST-able image下拉菜單

回答

相關問題