如何将jQuery滑块值乘以数据库数据

时间:2016-05-26 00:17:22

标签: javascript php jquery arrays json

我想通过jQuery UI栏滑块的值将数据库中的蛋糕价格乘以。滑块用于选择客户将购买多少个蛋糕。我已经尝试使用json_encode从Php代码中收集价格的值作为数值数据,我似乎做错了,因为它一直在返回NaN。我将非常感谢您的回复。 Php代码在这里:

// Connect to the database

$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

// Grab the profile data from the database

$res=mysqli_query($dbc, "SELECT * FROM tblcarousel");

while ($carouselRow = mysqli_fetch_array($res)){

echo'       <div class="row"><div class="modal fade ' . $carouselRow['carousel_id'] . '" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">';
echo'           <div class="modal-dialog">';
echo'               <div class="modal-content">';
echo'                   <div class="modal-header">';
echo'                       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
echo'                       <h2>' . ucwords($carouselRow['cake_title']) . ' unit price :&#8358;' . ($carouselRow['cake_price']) . '</h2>';
echo'                   </div>';
echo'                   <div class="modal-body">';
echo'                       <div class="row">';
echo'                           <div class="span5">';
echo'                               <img src="admin/' . MM_UPLOADPATH .$carouselRow['cake_image'] . '" alt="' . $carouselRow['cake_title'] . '" />';
echo'                           </div>';
echo'                       <div class="span7">';
echo'                       <p>';
echo'                           <label for="amount">Maximum price:</label>';
echo'                           <input type="text" name="amount" class="amount" style="border:0; color:#f6931f; font-weight:bold;" />';
echo'                       </p>';
echo'                       <div class="slider-range-min"></div>';

echo'                       <div class="dont_display" style="display:none">';
                                $cakePrice  =   $carouselRow['cake_price'];
echo'                       </div>';
echo'                       <span class="orderValueOutput" style="background-color:yellow; display:block; height:2em">';
echo'                       </span>';

echo'                       <div class="demo-description" style="margin-top:3em; background-color:grey">Insert the info to supply contact here...';
echo'                       </div>';
echo'                           </div>';
echo'                       </div>';
echo'                   </div>';
echo'               </div>';
echo'           </div>';
echo'       </div></div>';

来自jQuery UI的JavaScript在这里:

                $(function(){
                    $( ".slider-range-min" ).slider({
                        range: "min",
                        value: 1,
                        min: 1,
                        max: 50,
                        slide: function( event, ui ){
                            $( ".amount" ).val( "=N=" +  ui.value);
                            var cakePrice = <?php echo(json_encode($cakePrice)); ?>;
                            var cakePriceValue =  Math.round(parseFloat(cakePrice);
                            var orderValueOutput = Math.round(parseFloat(ui.value) * cakePriceValue);
                            $(".orderValueOutput").text(orderValueOutput);
                        }
                    });
                    $( ".amount" ).val( "=N=" + $( ".slider-range-min" ).slider( "value" ) );
                });

0 个答案:

没有答案