javascript to reference input IDs in php loop and pass values back to same input ID
- by Smudger
I have a form which is essentially an autocomplete input box. I can get this to work perfectly for a single text box. What I need to do is create unique input boxes by using a php for loop. This will use the counter $i to give each input box a unique name and id.
The problem is that the unique value of the input box needs to be passed to the javascript. this will then pass the inputted data to the external php page and return the mysql results.
As mentioned I have this working for a single input box but need assistance with passing the correct values to the javascript and returning it to correct input box.
existing code for working solution (first row works only, all other rows update first row input box)
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("autocompleteperson.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
</head>
<body>
<form name="form1" id="form1" action="addepartment.php" method="post">
<table>
<? for ( $i = 1; $i <=10; $i++ ) { ?>
<tr>
<td> <? echo $i; ?></td>
<td>
<div>
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</td>
</tr>
<? } ?>
</table>
</body>
</html>
code for autocompleteperson.php is:
$query = $db->query("SELECT fullname FROM Persons WHERE fullname LIKE '$queryString%' LIMIT 10");
if($query) {
while ($result = $query ->fetch_object()) {
echo '<li onClick="fill(\''.$result->fullname.'\');">'.$result->fullname.'</li>';
}
}
in order to get it to work for all rows, I include the counter $i in each of the file names as below:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function lookup(inputString<? echo $i; ?>) {
if(inputString<? echo $i; ?>.length == 0) {
// Hide the suggestion box.
$('#suggestions<? echo $i; ?>').hide();
} else {
$.post("autocompleteperson.php", {queryString: ""+inputString<? echo $i; ?>+""}, function(data){
if(data.length >0) {
$('#suggestions<? echo $i; ?>').show();
$('#autoSuggestionsList<? echo $i; ?>').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString<? echo $i; ?>').val(thisValue);
setTimeout("$('#suggestions<? echo $i; ?>').hide();", 200);
}
</script>
</head>
<body>
<form name="form1" id="form1" action="addepartment.php" method="post">
<table>
<? for ( $i = 1; $i <=10; $i++ ) { ?>
<tr>
<td> <? echo $i; ?></td>
<td>
<div>
<input type="text" size="30" value="" id="inputString<? echo $i; ?>" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions<? echo $i; ?>" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList<? echo $i; ?>">
</div>
</div>
</td>
</tr>
<? } ?>
</table>
</body>
</html>
The autocomplete suggestion works (although always shown on first row) but when selecting the data always returns to row 1, even if input was on row 5. I have a feeling this has to do with the fill() but not sure? is it due the the autocomplete page code? or does the fill referencing ThisValue have something to do with it.
example of this page (as above) can be found here
Thanks for the assistance, much appreciated.
UPDATE - LOLO
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function lookup(i, inputString) {
if(inputValue.length == 0) {
// Hide the suggestion box.
$('#suggestions' + i).hide();
} else {
$.post("autocompleteperson.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions' + i).show();
$('#autoSuggestionsList' + i).html(data);
}
});
}
} // lookup
function fill(i, thisValue) {
$('#inputString' + i).val(thisValue);
setTimeout("$('#suggestions' + i).hide();", 200);
}
</script>
</head>
<body>
<form name="form1" id="form1" action="addepartment.php" method="post">
<table>
<? for ( $i = 1; $i <=10; $i++ ) { ?>
<tr>
<td> <? echo $i; ?></td>
<td>
<div>
<input type="text" size="30" value="" id="inputString<?php echo $i; ?>" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions<? echo $i; ?>" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList<? echo $i; ?>">
</div>
</div>
</td>
</tr>
<? } ?>
</table>
</body>
</html>
google chrome catched the following errors:
first line on input, second line on loosing focus
