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的十六进制值

回答

相关问题