問題描述
將多個參數傳遞給 javascript 並根據兩個參數 + php 循環更新 html 內容 (pass multiple parameters to a javascript and update html content bases on both parameters + php loop)
I have form that uses jquery to fetch mysql data with an external php page.
the script is essentially an autocomplete for an input field. trouble is that I have the input field in a loop, field ID is being determine by the counter '$i' in the loop.
as such I want to pass the user entered value of the input box to the javascript along with the counter value '$i' so that the javascript can return the result to the correct input box in the loop.
I hope that makes sense.
the original and working code for a single input box is below:
Javascript
<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>
HTML
<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>
So what I want to do is pass the row number ($i) to the javascript as well so that it returns the value to the correct input box. My basic attempts at this are below [apologies for my lack of javascript skill :‑) ]
Javascript
<script type="text/javascript">
function lookup(rownumber, inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("autocompleteperson.php", {queryString: ""+(inputString+rownumber)+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString'+'rownumber').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
PHP / HTML
<table>
<? for ( $i = 1; $i <=50; $i++ ) { ?>
<tr>
<td>
<div>
<input type="text" size="30" value="" id="inputString<? echo $i; ?>" onkeyup="lookup(<? echo $i; ?>,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>
The second part of the question would be getting the div suggestionbox to appear in the correct place as well. The same applies where I would like the name of the suggestionbox to append the row number '$i'.
Any help would be appreciated.
Kind Regards,
UPDATED CODE
javascript
<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(rownumber, thisValue) { // add the rownumber as a parameter
$('#inputString'+rownumber).val(thisValue); // remove the quotation marks
setTimeout("$('#suggestions').hide();", 200);
}
</script>
HTML/PHP
<table>
<?
for ( $i = 1; $i <=50; $i++ ) {
?>
<tr>
<td> Job <? echo $i; ?></td>
<td>
<SELECT NAME=job<? echo $i; ?> id=job<? echo $i; ?> style="width:150px;border: 1px solid #2608c3;color:red">
<OPTION VALUE=0 ></option>
<option>
<?=$optionjobs?>
</option>
</SELECT>
</td>
<td> Person </td>
<td>
<div>
<input type="text" size="30" value="" id="inputString<? echo $i; ?>" onkeyup="lookup(<? echo $i; ?>,this.value);" onblur="fill(<? echo $i; ?>,this.value);" />
</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>
‑‑‑‑‑
參考解法
方法 1:
first of all, in the basic code that works, you're calling fill() without giving any parameters whereas in the javascript, you're waiting for thisValue.
Now for your problem, let's take your fill function and do some modifications
function fill(rownumber, thisValue) { // add the rownumber as a parameter
$('#inputString'+rownumber).val(thisValue); // remove the quotation marks
setTimeout("$('#suggestions').hide();", 200);
}
and in the HTML file
[...]
<div>
<input type="text" size="30" value="" id="inputString<? echo $i; ?>" onkeyup="lookup(<? echo $i; ?>,this.value);" onblur="fill(<? echo $i; ?>,this.value);" />
[...]
simply add in the fill() function the needed parameters.