我正在尝试创建一个使用自动选择来选择项目的php表单,然后从该选择中填充价格输入字段,然后填充小计和总字段。
我有一个名为“配件”的表,其中包含以下字段:
accessories_id | accessories_name | accessories_price
我可以让第一个自动选择工作,但我不知道从那里去哪里。我很好用PHP,但使用Javascript我是一个完全新手,不知道从哪里开始。
html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Autocomplete</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function(){
$("#accessories_name").autocomplete({
source:'getautocomplete.php',
minLength:1
});
});
$("#accessories_name").autocomplete({
source:'getautocomplete.php',
minLength:1,
change: function( event, ui ) {}
});
$( "#accessories_name" ).on( "autocompletechange", function( event, ui ) {
$("accessories_price").val(ui.item.value); //sets price with the value from selected accessory
// [...] other fields logic
} );
$( "#quantity" ).change(function() {
var subtotal = $("#accessories_price").val() * $("#quantity").val(); //don't forget to verify if are numbers
$("#subtotal").val(subtotal);
})
</script>
</head>
<body>
<form method="post" action="">
Name : <input type="text" size="40" id="accessories_name" name="accessories_name" />
Price: <input type="text" size="30" id="accessories_price" name="accessories_price" />
Quantity: <input type="text" size="30" id="quantity" name="quantity" />
Subtotal: <input type="text" size="30" id="subtotal" name="subtotal" />
<br />
Name : <input type="text" size="40" id="accessories_name" name="accessories_name" />
Price: <input type="text" size="30" id="accessories_price" name="accessories_price" />
Quantity: <input type="text" size="30" id="quantity" name="quantity" />
Subtotal: <input type="text" size="30" id="subtotal" name="subtotal" />
<br />
Total: <input type="text" size="40" id="accessories_total" name="accessories_total" />
</form>
</body>
</html>
php文件
<?php
mysql_connect("localhost", "db_user", "password");
mysql_select_db("db");
$term=$_GET["term"];
$query=mysql_query("SELECT * FROM accessories WHERE accessories_description LIKE '%".$term."%' ORDER by accessories_description");
$json=array();
while($accessories=mysql_fetch_array($query)){
$json[]=array(
'value'=>$accessories["accessories_name"],
'label'=>$accessories["accessories_name"]." - ".$accessories["accessories_id"]
);
}
echo json_encode($json);
?>
答案 0 :(得分:0)
首先,您需要通过在change
中添加autocomplete
来初始化 $("#accessories_name").autocomplete({
source:'getautocomplete.php',
minLength:1,
change: function( event, ui ) {} //add this to your current autocomplete
});
回调:
change
在您需要为 $( "#accessories_name" ).on( "autocompletechange", function( event, ui ) {
$("accessories_price").val(ui.item.value); //sets price with the value from selected accessory
// [...] other fields logic
} );
回调创建侦听器之后,一旦在自动填充字段中选择了选项,就会调用它。在此监听器中,您将获得更新价格和其他字段的代码:
autocomplete
对于.change()
以外的字段,您可以使用jquery $( "#quantity" ).change(function() {
var subtotal = $("#accessories_price").val() * $("#quantity").val(); //don't forget to verify if are numbers
$("#subtotal").val(subtotal);
})
方法,例如'#quantity'大小写:
$(document).ready({})
在{{1}}事件中添加您的逻辑所需的更改代码, 并小心第二和其他配件的ID