Passing form ID's as a variable back and forth between javascript and php
<p>Let me start off by saying while I'm pretty good with PHP and HTML, I don't know much about javascript/jquery. I also apologize if this has been answered before, but I haven't had much luck finding anything in the search.</p>

<p>I'm working on a project where we have a form of undetermined size that I want to build some autocomplete functionality into. The form fields and necessary div's are being named using a counter as you can see in the code below.</p>

<pre><code>$set_b = 'upl_band'.$count;
$sugbox = $set_b."sug";
$autobox = $set_b."auto";
echo "&lt;div&gt;&lt;input type=text name='$set_b' size=25 id='$set_b' onkeyup='bandlookup(this.value,'$set_b');' onblur='bandfill();'&gt;&lt;/div&gt;";
echo "&lt;div class='suggestionsBox' id='$sugbox' style='display: none;'&gt;&lt;img src='upArrow.png' style='position: relative; top: -12px; left: 30px;' alt='upArrow' /&gt;&lt;div class='suggestionList' id='$autobox'&gt;&amp;nbsp;&lt;/div&gt;&lt;/div&gt;";
</code></pre>

<p>I'm trying to pass the main value - $set_b into my javascript onkeyup. However, somewhere along the line I'm losing my values. If I setup my form with concrete id's this code works fine, but when I make my id's variable I'm getting lost. My javascript is below. The post call to band.php is my lookup script.</p>

<pre><code>function bandlookup(bandString, boxName) {
    if(bandString.length == 0) {
        // Hide the suggestion box.
        var s = boxName+"sug";
        $("#"+s).hide();
    } else {
        var su = boxName+"sug";
        var suauto = boxName+"auto";
        $.post("band.php", {queryString: ""+bandString+"", inputName: ""+boxName+""}, function(data){
            if(data.length &gt;0) {
                $("#"+su).show();
                $("#"+suauto).html(data);
            }
        });
    }
} // lookup

function bandfill(thisValue, boxName) {
    var s = boxName+"sug";
    $("#"+boxName).val(thisValue);
    setTimeout("$('#'+s).hide();", 200);
}
</code></pre>

<p>and band.php</p>

<pre><code>$db = new mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');

if(!$db) {
    // Show error if we cannot connect.
    echo 'ERROR: Could not connect to the database.';
} else {
    // Is there a posted query string?
    if(isset($_POST['queryString'])) {
        $queryString = $db-&gt;real_escape_string($_POST['queryString']);
        $box = $_POST['inputName'];
        // Is the string length greater than 0?

        if(strlen($queryString) &gt;0) {
                $query = $db-&gt;query("SELECT band_name,band_id FROM upl_band WHERE band_name LIKE '$queryString%' LIMIT 10");
                if($query) {
                    // While there are results loop through them - fetching an Object (i like PHP5 btw!).
                    while ($result = $query -&gt;fetch_object()) {
                        // Format the results, im using &lt;li&gt; for the list, you can change it.
                        // The onClick function fills the textbox with the result.
                        echo '&lt;li onClick="bandfill(\''.$result-&gt;band_name.'\',\''.$box.'\');"&gt;'.$result-&gt;band_name.'&lt;/li&gt;';
                    }
                } else {
                    echo 'ERROR: There was a problem with the query.';
                }
        } else {
            // Dont do anything.
        } // There is a queryString.
    } else {
        echo 'There should be no direct access to this script!';
    }
}
</code></pre>

<p>My problem could be with the post call in the javascript, but I'm more leaning towards me improperly dealing with the variable variable names as an id tag.</p>
