2016-03-15 75 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> 
相關問題