OK, first off let me say that I know that javascript is a client side language and that php is a server side language. I've read that you can't assign javascript variables to php variables too. But I'm still absolutely stumped as to WHY my code below doesn't work. Perhaps someone on here could shed some light.
Basically what I do is define a php function that takes a search field input variable and then queries a MySQL database. The return is html code that is a basically a few images in the database that meet search criteria, it comes back in the form <img src="XXXX1" /><img src="XXXX2" />
I then have a javascript function that accepts a button up or down click and increments through 2 possible search options (in reality there are many more, but for this question let's keep it simple) and then replaces the HTML of a div with the search results.
What I can't figure out is that when I fill a javascript variable with only a string (no concatenation of strings, just a simple text string), I can call the php function from javascript without a problem. But when I attempt to fill the javascript variable with a string that is the result of concatenation of a string and a string variable, the call to the php function doesn't work. I've attached a simplification of the code.
Thanks for any help. I am kinda new at this, so if I'm missing something easy please point me in the right direction.
<?php function searchDatabase($searchField){
/*...SQL call to get results based on search field...*/
return $searchResults; }?>
<script type="text/javascript">
var q=0;
var searchcriteria = new Array(2);
var searchvar = "firstcriteria";
//setting up my array for the search criteria and making a simple variable with 1 search criteria
searchcriteria[0] = "<?php echo testNewPHP('" + searchvar + "') ?>"
searchcriteria[1] = "<?php echo searchDatabase('secondcriteria') ?>"
//filling the array with 2 commands to search. The first one combines a variable and text while second one is just text
function callSearch(buttonID)
{
if(buttonID=='down'){ q--}
else{ q++}
//increments the counter
document.getElementById("imageSet1").innerHTML = searchcriteria[q];
//This sets the html of a div in my html to the results of the php function call
}
</script>
<html>
<div id="imageSet1">
<p>Here is some sample html</p>
<input id="upbutton" type="button" onclick="callSearch('up')" class="upbutton" value=""/>
<input id="downbutton" type="button" onclick="callSearch('down')" class="downbutton" value=""/>
</div>
</html>