dongmeng0317 2013-03-22 05:42
浏览 53

HTML表单加载通过PHP显示sql十六进制值

I'm trying to dynamically load a form that will is populated from the number of rows in a sql data base. The data returns a hex color, name, and price. I want to display the color and the name to the user within the form and on the POST, I want to send the price attached to that specific color. I've spent all day trying to figure this out.

Any help would be greatly appreciated!

EDIT: (here's what I have so far

Here's an example of what I have :http://hruska-schuman.com/test2/feedback_form.php

Code:

   $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>

Using JQuery UI select table: http://jqueryui.com/selectable/

I just don't know how to get get the selected index and post "$prices[selectedIndex]"

  • 写回答

1条回答 默认 最新

  • doujilou3903 2013-03-22 08:09
    关注

    You should use a custom attribute (like data- attribute) to your color elements.

            $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>

    so then in your js you can do something like this:

     $(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;
                });
            }
        });
    });

    Where #price-input could be a hidden input into the form:

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

    Of course you could also use radio inputs for this.

    评论

报告相同问题？

悬赏问题

  • ¥15 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题，求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？