CODEWITHSUNDEEP
phpjavascriptmysqlloops
Smudger
Smudger

Reputation: 10809

javascript to reference input IDs in php loop and pass values back to same input ID

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">
                &nbsp;
            </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; ?>">
                &nbsp;
            </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; ?>">
                &nbsp;
            </div>
            </div>  
        </td>
    </tr>
<?  }   ?>
</table>
</body>
</html>

google chrome catched the following errors:

first line on input, second line on loosing focus image

Upvotes: 1

Views: 2064

Answers (2)

Krzysztof
Krzysztof

Reputation: 16150

You cannot mix JS with PHP. PHP is a server-side language, you can render dynamic JS with that, but after it's rendered you cannot use PHP with JS. First of all you should change your JS functions, I suggest to add parameter like i which will contain input number:

<script type="text/javascript">
    function lookup(i, inputString) {
        if(inputString.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>

Then change invokation of this functions and provide number:

<input type="text" size="30" value="" id="inputString<? echo  $i; ?>" onkeyup="lookup(<? echo $i; ?>, this.value);" onblur="fill(<? echo $i; ?>);" />

That should be enough.

Upvotes: 1

Yogesh Suthar
Yogesh Suthar

Reputation: 30488

The problem is with your code is you having same ID for all textbox and each DIV within for loop

<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />

It should be unique, like this edit.

<input type="text" size="30" value="" id="inputString<?php echo $i; ?>" onkeyup="lookup(this.value);" onblur="fill();" />

Upvotes: 1

Related Questions