Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have a web form that contains a javascript / php autocomplete for an input field.

problem is that this input field sits inside a PHP loop which repeats 50 times. I use the loop to give each input a unique name and id.

The javascript is hardcoded to populate input field "inputString" and display possible suggestions in div "suggestions"

with the loop, I give each input box a unique name "inputstring1", "inputstring2", "inputstring3" etc etc.

I need to be able to populate the inputstring that is currently being worked on.

how can I pass the variable "inputstringX" to the javascript so it populates the correct input box? same applies to the div "suggestion" so that it displays nex tto the correct input box?

javascript is:

<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>

and php/html is:

<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(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: 30px;" alt="upArrow" />
                                        <div class="suggestionList" id="autoSuggestionsList">
                                            &nbsp;
                                        </div>
                                    </div>  
                                </td>
                            </tr>
                        <?
                            }
                        ?>
                </table>

Thanks for yourideas and for your time,

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

Don't use the onkeyup html attribute and use the jQuery functions to attach your function. So you can use this to retrieve your input.

$(function() {
    var inputs = $('input[type="text"]'); // You may want to use a css class instead of that
    inputs.keyup(function() {
         // Here, this == the input. So you can't get the id by using $(this).attr('id').
    });
});
share|improve this answer
 
Thanks Magus, worry not quite with you, can you answer within my question code so I can see how to use this. Apologies for my ignorance. Thanks again, –  Smudger Nov 15 '12 at 11:06
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.