[英]How can I display records from a database based on onchange event using Ajax/JavaScript?
I want to display a select box based on a radio button selection. 我想显示一个基于单选按钮选择的选择框。 There are 2 radio buttons having the names "New project" and "Previous project".
有两个单选按钮,名称分别为“新项目”和“上一个项目”。 If the user select a previous project then the combobox will display using JavaScript.
如果用户选择以前的项目,则组合框将使用JavaScript显示。
From this combobox the user have to select the id of his/her previous project and based on this project id some data are filled into textboxes and comboboxes using JavaScript or Ajax. 用户必须从此组合框中选择其上一个项目的ID,然后根据该项目ID,使用JavaScript或Ajax将一些数据填充到文本框和组合框中。
What is the solution? 解决办法是什么?
1. index.html
The page loads the suggest.js
file wherein the searchSuggest
function is described. 该页面加载了
suggest.js
文件,其中描述了searchSuggest
函数。 The keyboard event handler in this occasion is the onkeyup
which checks for each letter that is being entered in the textbox. 在这种情况下,键盘事件处理程序是
onkeyup
,它检查在文本框中输入的每个字母。 A div element is also created so that the data that has been passed by JavaScript can be handled. 还创建了一个div元素,以便可以处理JavaScript传递的数据。
2. suggest.js
var searchReq = getXmlHttpRequestObject();
This above line creates a httpRequest object for passing values.
function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
var str = escape(document.getElementById(’PoNumber’).value);
searchReq.open(”GET”, ’searchSuggest.php?search=’ + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
} }
str
gets the value from the textbox. str
从文本框中获取值。 Each word entered in the text box is being passed to this variable which forms a part of the function. 在文本框中输入的每个单词都将传递给该变量,该变量构成函数的一部分。 Later the values are passed on to the
searchSuggest.php
file which does all the processing. 稍后,这些值将传递到
searchSuggest.php
文件,该文件将进行所有处理。
var curLeft=0;
if (str1.offsetParent){
while (str1.offsetParent){
curLeft += str1.offsetLeft;
str1 = str1.offsetParent;
}
}
curLeft
defines the current left position which is being initialize to 0 as the begining. curLeft
定义当前的左位置,该位置将被初始化为0。 offsetparent
returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. offsetparent
返回对最接近(包含层次结构中最近的)包含元素的对象的引用。 offsetParent
returns null when the element has style.display set to “none”. 当元素的style.display设置为“ none”时,
offsetParent
返回null。 Since the element can be inside many hierarchies we loop along with each of them to get hold of the value. 由于元素可以位于许多层次结构中,因此我们与每个层次结构一起循环以获取值。
ss.setAttribute(’style’,'position:absolute;top:’+curTop+’;left:’+curLeft+’;width:150;z-index:1;padding:5px;border: 1px solid #000000; overflow:auto; height:105; background-color:#F5F5FF;’);
Here ss
represents document id of the layer. ss
代表该层的文档ID。 In the above line the style
property of the div tag is being set. 在上面的行中,正在设置div标签的
style
属性。 The position
should always be absolute
else the layer will not be formed. 该
position
应始终是absolute
position
否则将不会形成该层。 The lower elements will be pushed down to accommodate the values that are being retrieved from the database. 较低的元素将被下推以适应从数据库中检索到的值。 The
top
, left
etc. are also being put to show to drop down (div layer). top
, left
等也被放到下拉菜单中(div层)。 overflow
is also set so for the scrolling effect in the div tag when it crosses the defined height
. 还设置了
overflow
以便当div标签超过定义的height
时滚动效果。
The other stuff in the file should be self explanatory as it declares the variables and the functions. 文件中的其他内容应该是自解释性的,因为它声明了变量和函数。
database.php database.php
function db_connect($server = 'localhost', $username = 'root', $password = 'enigma', $database = 'suggest', $link = 'db_link') 函数db_connect($ server ='localhost',$ username ='root',$ password ='enigma',$ database ='suggest',$ link ='db_link')
Please change the server
, username
, password
and database
name corresponding to yours. 请更改与您相对应的
server
, username
, password
和database
名称。
I suggest you start learning jQuery. 我建议您开始学习jQuery。 Have a look at jQuery for Absolute Beginners Video Series
看看jQuery绝对入门视频系列
In this tutorial you will learn quickly and practical how you can easily deal with creating AJAX requests using jQuery. 在本教程中,您将快速实用地学习如何使用jQuery轻松创建AJAX请求。
You need to use the post function from jQuery ( http://api.jquery.com/jQuery.post/ ). 您需要使用jQuery( http://api.jquery.com/jQuery.post/ )中的post函数。 Create a new PHP file in which you load your data and create a JavaScript function to fill the textboxes with the returned data.
创建一个新的PHP文件,在其中加载数据并创建一个JavaScript函数,以使用返回的数据填充文本框。
HTML: HTML:
<input type="text" name="srcTextbox" value="test" />
<input type="text"
name="destTextbox"
onchange="$.post('get_values_from_db.php', { id : $('srcTextbox').value } , function(data) { $('destTextbox').value = data; });" />
PHP (get_values_from_db.php): PHP(get_values_from_db.php):
<?php
$id = $_POST['id'];
//Get data here with the id from srcTextbox.
echo $data;
?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.