2016-03-15 79 views
0

我有一个窗体,其中两个字段是产品名称和产品price.Product名称是一个下拉链接与产品表在db.All产品从db.I获取我想如果我从下拉选择一个产品那么数据库表中的相应价格将自动显示在文本字段中。 我的价格文本字段代码基于php和java脚本的下拉选择结果填充文本字段?

Here is my code

+1

到目前为止,你做了什么?向我们展示代码! :)谢谢 –

+0

兄弟如果你编辑你的问题,并有适当的文本与代码将是简单和方便的每个人我猜! –

+0

请检查代码 –

回答

1

这是一个简单的自动完成功能。即使你可以在网络中找到它。试图改变这个代码需要

的index.php

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Autocomplete textbox using jQuery, PHP and MySQL by CodexWorld</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#skills").autocomplete({ 
     source: 'search.php' 
    }); 
    }); 
    </script> 
</head> 
<body> 

<div class="ui-widget"> 
    <label for="skills">Skills: </label> 
    <input id="skills"> 
</div> 
</body> 
</html> 

的search.php

<?php 
$dbHost = 'localhost'; 
$dbUsername = 'root'; 
$dbPassword = ''; 
$dbName = 'codexworld'; 
//connect with the database 
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName); 
//get search term 
$searchTerm = $_GET['term']; 
//get matched data from skills table 
$query = $db->query("SELECT * FROM skills WHERE skill LIKE '%".$searchTerm."%' ORDER BY skill ASC"); 
while ($row = $query->fetch_assoc()) { 
    $data[] = $row['skill']; 
} 
//return json data 
echo json_encode($data); 
?> 

参考

http://www.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/

+0

的附加图像我不想自动完成文本框。我想要如果用户选择产品名称prom下拉,那么它的价格将自动从产品表中获取并将显示在价格字段中。 –

0

这一定会对你有所帮助

您还可以使用data-xxx而不是属性中的select。如果您使用data-xxx属性,请在jquery中进行必要的更改。

<select id="product-name" > 
    <option value=""> Select a product</option> 
    <?php 
    // $products is from your product table a 2D associative array 
    // fetch formate like 
    // $procucts = array(
    //     array('name' => <product1-name>,'price' => <product1-price>), 
    //     array('name' => <product2-name>,'price' => <product2-price>), 
    //     ............... 
    //     ............... 
    //     ); 
    foreach($products as $product){ 
    ?> 
    <option value="<?php echo $product['price']; ?>" ><?php echo $product['name']; ?></option> 
    <?php 
    } 
    ?> 
</select> 

<input type="text" id="product-price" name="product-price" value="" /> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#product-name").change(function(){ 
     var price = $(this).val(); 
     $("#product-price").val(price); 
    }); 
    }); 
</script>      
+0

不,它不会解决我的问题。 –

+0

我使用此代码来减少服务器通信。或者你可以使用自动完成。点击此链接https://jqueryui.com/autocomplete/#remote –

+0

我们还可以将价格值放入数据价格属性中,这样我们也可以在提交表单时获取所选产品;看到我的答案; – itzmukeshy7

0
<select id="product-name" > 
    <option value=""> Select a product</option> 
    <?php 
    // $products is from your product table a 2D associative array 
    // fetch formate like 
    // $procucts = array(
    //     array('name' => <product1-name>,'price' => <product1-price>), 
    //     array('name' => <product2-name>,'price' => <product2-price>), 
    //     ............... 
    //     ............... 
    //     ); 
    foreach($products as $product){ 
    ?> 
    <option data-price="<?php echo $product['price']; ?>" value="<?php echo $product['product_id']; ?>" ><?php echo $product['name']; ?></option> 
    <?php 
    } 
    ?> 
</select> 

<input type="text" id="product-price" name="product-price" value="" /> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#product-name").change(function(){ 
     var price = $("option:selected", this).attr('data-price'); 
     $("#product-price").val(price); 
    }); 
    }); 
</script> 
相关问题