如何从数据库中检索单个元素的数据并将其存储到自动div中

时间:2015-11-05 08:10:08

标签: javascript php jquery html

我想要做的是,我有一张名为酒店的桌子,我有一个页面,人们可以根据房间类别预订酒店。现在用于显示酒店我正在使用while循环,其中数据被提取,酒店显示在自动div中,所有人都相同。所以我添加了一个$i=1并添加到id字段中,$i在while循环结束时递增。
所以我得到的错误是我无法检索房间类别的费用。

这是我的代码:

获取个别酒店的PHP代码并以div显示。

<?php
include 'mysql.php';
$i = 1;
$query = mysql_query("SELECT * FROM hotels WHERE location = 'portblair' ") or die("the query cannot be completed at this moment");
if(mysql_num_rows($query) <1) {
    die("no hotels found");
}
while($row = mysql_fetch_array($query, MYSQL_ASSOC)){

    $hotel_name = $row['name'];
    $hotel_type = $row['type'];
    $hotel_location = $row['location'];
    $hotel_cat1 = $row['cat1'];
    $hotel_cat2 = $row['cat2'];
    $hotel_cat3 = $row['cat3'];
    $hotel_cat4 = $row['cat4'];
    $hotel_cp = $row['cp'];
    $hotel_map = $row['map'];
    $hotel_ap = $row['ap'];
    $hotel_em = $row['em'];
    if($hotel_type == "0"){
        $hotel_star ='<span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span>';
    }
    if($hotel_type == "1"){
        $hotel_star ='<span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span>';
    }
    if($hotel_type == "2"){
        $hotel_star ='<span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span>';
    }
    if($hotel_type == "3"){
        $hotel_star ='<span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span>';
    }
    if($hotel_type == "4"){
        $hotel_star ='<span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span>';
    }
    ?>
    <div class="col-md-3 col-xs-6">
        <div class="panel panel-red">
            <div class="panel-heading">
                <?php echo $hotel_name; ?>
            </div>
            <div class="panel-body">
                <img src="images/hotels/<?php echo $hotel_name ?>.png" class="img-responsive"/>
                <div class="my-caption">
                    <?php echo  $hotel_star;  ?>
                </div>
                <select name="hotel_cat" id="hotel_cat[<?php echo $i; ?>]" class="form-control" onchange="hotel_rate()">
                    <option value="">Category</option>
                    <?php if($hotel_cat1 != ""){
                        ?>
                        <option value="<?php echo $hotel_cat1; ?>"><?php echo $hotel_cat1; ?></option>
                        <?php
                    } ?>
                    <?php if($hotel_cat2 != ""){
                        ?>
                        <option value="<?php echo $hotel_cat2; ?>"><?php echo $hotel_cat2; ?></option>
                        <?php
                    } ?>
                    <?php if($hotel_cat3 != ""){
                        ?>
                        <option value="<?php echo $hotel_cat3; ?>"><?php echo $hotel_cat3; ?></option>
                        <?php
                    } ?>
                    <?php if($hotel_cat4 != ""){
                        ?>
                        <option value="<?php echo $hotel_cat4; ?>"><?php echo $hotel_cat4; ?></option>
                        <?php
                    } ?>

                </select>
                <span id="add[<?php echo $i; ?>]" >Add</span>

            </div>
        </div>
    </div>
    <?php
    $i++;

}
?>
<input  type="hidden" name="count" id="count" value="<?php echo $i; ?>"/>

所以我想要一个js脚本,显示为各个酒店选择的房间类别的费用。

这是我的js代码:

function hotel_rate(){
 	jQuery(document).ready(function($){
		var i=1;
		var cnt = $("#count").val();
		for(i=1;i<cnt;i++){
			var cat = $("#hotel_cat["+i+"]").val();
			var test = cat.split(:);
			var cat_cost = parseInt(test[1]);
			$("#add["+i+"]").html("Rs: "+cat_cost+" Add");
		}
		
		
	});
	}

从控制台获取的错误是:“未捕获的ReferenceError:未定义hotel_rate”和“Uncaught TypeError:无法读取未定义的属性'split'。”

任何类型的帮助都会得到满足。 提前完成。

3 个答案:

答案 0 :(得分:0)

hotel_rate()的声明应该在内部就绪功能,也可以用cat.split(:);替换cat.split(':');

$(function(){
    function hotel_rate(){
        var i=1;
        var cnt = $("#count").val();
        for(i=1;i<cnt;i++){
            var cat = $("#hotel_cat["+i+"]").val();
            var test = cat.split(':');
            var cat_cost = parseInt(test[1]);
            $("#add[1]").html("Rs: "+cat+" Add");
        }
    }
});

答案 1 :(得分:0)

你的jquery文件必须是这样的

function hotel_rate(){ // just define the function.
    var i=1;
    var cnt = $("#count").val();
    for(i=1;i<cnt;i++){
        var cat = $("#hotel_cat["+i+"]").val();
        var test = cat.split(':'); 
        var cat_cost = parseInt(test[1]);
        $("#add[1]").html("Rs: "+cat+" Add");
    }
}

jQuery(document).ready(function($){
   hotel_rate(); // fire it on document ready
});

此外,您错过var test = cat.split(:);中的引号,应该是var test = cat.split(':');

答案 2 :(得分:0)

以上两个答案也是对的。你必须在document.ready部分声明函数,并且split函数参数必须在其中包含字符串。

这里是我按照你的概念放置工作代码的例子。你也可以检查这个小提琴中的粘贴php fiddle

    <div class="col-md-3 col-xs-6">
    <div class="panel panel-red">
        <div class="panel-heading">
            Hotel name            </div>
        <div class="panel-body">
            <img src="images/hotels/Hotel name.png" class="img-responsive"/>
            <div class="my-caption">
                <span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span>                </div>
            <select name="hotel_cat" id="hotel_cat_1" class="form-control" onchange="hotel_rate()">
                <option value="">Category</option>
                                        <option value="1:50">1</option>

            </select>
            <span id="add[1]" >Add</span>

        </div>
    </div>
</div>
<input  type="hidden" name="count" id="count" value="1"/>

&#13;
&#13;
<script>
    function hotel_rate(){
 	
			var cat = document.getElementById("hotel_cat_1").value;
        alert(cat);
			var test = cat.split(':');
			var cat_cost = parseInt(test[1]);
			document.getElementById("add[1]").innerHTML="Rs: "+cat_cost+" Add";
		}
	
</script>
&#13;
&#13;
&#13;

并且你将猫的价值分成了&#39;:&#39;为了获得酒店的成本,所以你必须拥有以下价值:隔离。