HTML窗體加載顯示通過PHP的十六進制值

我想動態加載一個窗體，將填充從SQL數據庫中的行數。數據返回一個十六進制顏色，名稱和價格。我想在窗體和POST上向用戶顯示顏色和名稱，我想發送附加到該特定顏色的價格。我花了整整一天的時間來弄清楚這一點。HTML窗體加載顯示通過PHP的十六進制值

任何幫助將不勝感激！

編輯：這裏（這是我迄今爲止

這裏是什麼，我有一個例子：http://hruska-schuman.com/test2/feedback_form.php

代碼：

$query = "SELECT 
    `name`, 
    img, 
    price 
    FROM `gutter`"; 

      try 
      { 
        $stmt = $db->prepare($query); 
       $stmt->execute(); 
      } 
      catch(PDOException $ex) 
      { 
       die("Failed to run query: " . $ex->getMessage()); 
      } 

      $rows = $stmt->fetchAll(); 

     $form = 
     '<ol id="selectable" name="selectable">'; 

     foreach($rows as $row): 
     $prices[] = htmlentities($row['price'], ENT_QUOTES, 'UTF-8'); 
     $form .= '<li class="ui-widget-content" style="background:#'.htmlentities($row['img'], ENT_QUOTES, 'UTF-8').'">'.htmlentities($row['name'], ENT_QUOTES, 'UTF-8').' Price: '.htmlentities($row['price'], ENT_QUOTES, 'UTF-8').'</li>'; 
     endforeach; 

     $form .=' </ol>'; 

    ?> 
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Hruska Gutter Estimator</title> 
    <link rel="stylesheet" href="../extras/selecttable/development-bundle/themes/base/jquery.ui.all.css"> 
    <script src="../extras/selecttable/development-bundle/jquery-1.9.1.js"></script> 
    <script src="../extras/selecttable/development-bundle/ui/jquery.ui.core.js"></script> 
    <script src="../extras/selecttable/development-bundle/ui/jquery.ui.widget.js"></script> 
    <script src="../extras/selecttable/development-bundle/ui/jquery.ui.mouse.js"></script> 
    <script src="../extras/selecttable/development-bundle/ui/jquery.ui.selectable.js"></script> 
    <link rel="stylesheet" href="../extras/selecttable/development-bundle/demos/demos.css"> 



    <style> 
    #feedback { font-size: 1.4em; } 
    #selectable .ui-selecting { background: #000000; } 
    #selectable .ui-selected { background: #000000; color: white; } 
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } 
    </style> 
    <SCRIPT type="text/javascript"> 

      function isNumberKey(evt) 
      { 
      var charCode = (evt.which) ? evt.which : event.keyCode 
      if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
       return false; 
       } 

      return true; 
      } 


     </SCRIPT> 
    <script type="text/javascript"> 
    $(function() { 
     $("#selectable").selectable({ 
      stop: function() { 
       var result = $("#select-result").empty(); 
       $(".ui-selected", this).each(function() { 
        var index = $("#selectable li").index(this); 
        result.append("" + (index + 1)); 
        return index; 
       }); 
      } 
     }); 
    }); 
    </script> 
</head> 

<body> 
<h1>New Gutter Estimator!</h1> 
<form action="sendmail.php" method="post"> 

<table> 
<tr> 
<td>Gutter Color:</td> 
<td> 
<?php echo $form; ?> 
<span id="select-result" name="result">none</span> 
<span id="select-result" name="price"><?php echo $prices; ?></span> 
</td> 
</tr> 

<tr> 
<td>Board Feet:</td> 
<td> 
<input type="txtChar" onkeypress="return isNumberKey(event)" name="spouts" value="" maxlength="120" /> 
</td> 
</tr> 

<tr> 
<td>Number of Spouts:</td> 
<td> 
<input type="txtChar" onkeypress="return isNumberKey(event)" name="board_feet" value="" maxlength="120" /> 
</td> 
</tr> 

<tr> 
<td>E-mail to Recieve Estimate:</td> 
<td> 
<input type="text" name="email_address" value="" maxlength="120" /> 
</td> 
</tr> 

<tr> 
<td>Additional Comments:</td> 
<td> 
<textarea rows="10" cols="50" name="comments"></textarea> 
</td> 
</tr> 

<tr><td>&nbsp;</td> 
<td> 
<input type="submit" value="Get Your Free Estimate!" /> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html>

使用jQuery UI選擇表：http://jqueryui.com/selectable/

我只是不知道如何獲得選定的指數，併發布「$價格[selectedIndex]」

來源

2013-03-22 user1556695

你在一天結束時想出了什麼代碼？也許我們可以建立在 – 2013-03-22 05:46:40

您應該爲您的顏色元素使用自定義屬性（如data-屬性）。

 $form .= '<li class="ui-widget-content" style="background:#'. 
    htmlentities($row['img'], ENT_QUOTES, 'UTF-8').'" 
data-price=".$row['price'].">'. 
    htmlentities($row['name'], ENT_QUOTES, 'UTF-8'). 
    ' Price: '.htmlentities($row['price'], ENT_QUOTES, 'UTF-8'). 
    '</li>

這樣的話你的JS，你可以做這樣的事情：

$(function() { 
     $("#selectable").selectable({ 
      stop: function() { 
       var result = $("#select-result").empty(); 
       $(".ui-selected", this).each(function() { 
        var price = $("#selectable li").attr('data-price'); 
        result.append("" + (price)); 
        // or you can set it directly to an input/hidden input 
        $('#price-input').val(price); 
        return price; 
       }); 
      } 
     }); 
    });

凡#price-input可能是一個隱藏的輸入到form：

<input type="hidden" name="selectedPrice" />

當然你也可以使用radio爲此輸入。

來源

2013-03-22 08:09:18 xpy

這是一個好主意，但我提交時如何發佈選定的數據信息？ – user1556695 2013-03-22 09:14:01

@ user1556695我改變了答案，我想現在好多了。 – xpy 2013-03-22 13:35:10

HTML窗體加載顯示通過PHP的十六進制值

回答

相關問題