使用自动选择来填充表单字段

Question

I am trying to create a php form which uses autoselect to select an item, and from that selection, it populates the price input field and from that, populate the subtotal and total fields. 我正在尝试创建一个使用自动选择功能选择项目的php表单，然后从该选择中填充价格输入字段，并从中填充小计和总计字段。

I have a table called "accessories" which has the following fields: 我有一个名为“ accessories”的表，其中包含以下字段：

accessories_id | Accessories_id | accessories_name | Accessories_name | accessories_price 配件价格

I can get the first autoselect to work but Im not sure where to go from there. 我可以获得第一个自动选择功能，但是我不确定从那里去哪里。 Im ok with php but with Javascript I am an utter novice and don't know where to start. 我对php没问题，但是对Javascript我是个新手，也不知道从哪里开始。

html file 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 file 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);
?>

Answer 1

First of all you need to initialize the change callback by adding it in the autocomplete : 首先，您需要通过将change回调添加到autocomplete来对其进行初始化：

   $("#accessories_name").autocomplete({
      source:'getautocomplete.php',
      minLength:1,
      change: function( event, ui ) {} //add this to your current autocomplete
   });

After you need to create a listener for the change callback so it will be called once an option is selected in the autocomplete field. 需要为change回调创建侦听器后，一旦在自动完成字段中选择了一个选项，便会调用该侦听器。 Within this listener you will have your code to update the price and other fields: 在此侦听器中，您将拥有代码来更新价格和其他字段：

   $( "#accessories_name" ).on( "autocompletechange", function( event, ui ) {
       $("accessories_price").val(ui.item.value); //sets price with the value from selected accessory
       // [...] other fields logic
   } );

For fields other than autocomplete you can use the jquery .change() method as in ´#quantity´ case for example: 对于autocomplete以外的字段，您可以使用jQuery .change()方法，例如在“ .change() ”情况下：

   $( "#quantity" ).change(function() {
       var subtotal = $("#accessories_price").val() * $("#quantity").val(); //don't forget to verify if are numbers
       $("#subtotal").val(subtotal);
   })

Add this code with the changes you need for your logic inside the $(document).ready({}) event, and be careful with the IDs from second and other acessories 在$(document).ready({})事件中添加此代码以及逻辑所需的更改，并注意第二个和其他附件中的ID

使用自动选择来填充表单字段

问题描述

1 个解决方案

解决方案1
0 2013-12-09 17:12:09

使用自动选择来填充表单字段

问题描述

1 个解决方案

解决方案1 0 2013-12-09 17:12:09

解决方案1
0 2013-12-09 17:12:09