Im having a bit of trouble getting information from php into javscript. I know php is server side and js is browser but im sure this can work as all my variables are set on page load. The problem is variables codeofheight and codeofwidth in my js function - it works if i replace codeofwidth and codeofheight variables with appropriate values, but not otherwise. Can someone show me how this can work please.


[js]
<script>
var codeofheight = doorglass.codeofheight.value;
var codeofwidth = doorglass.codeofwidth.value;


if(document.images)
{
bar = new Array()
for(i=0;i<3;i++)
{
bar[i] = new Image()
bar[i].src = "images/"+codeofwidth+"_"+codeofheight+"_bar" + i + ".gif"
} }
function barsauto1()
{ if(document.images) { choose=document.doorglass.door1bars.options[document.doorglass.door1bars.selectedIndex].text.charAt(0)
document.barswitch1.src = "images/"+codeofwidth+"_"+codeofheight+"_bar"+choose+".gif " } }
window.onerror = null;
</script>
<?php

$codeofheight='1600'; //in the real script these variables are set by a series of if statements, determined by info from previous page.
$codeofwidth='2ds';


echo"
<form name='doorglass' action='somewhereelse.php'>
<input type='hidden' name='codeofheight' value='$codeofheight'>
<input type='hidden' name='codeofwidth' value='$codeofwidth'>
</form>
";?>

[/js]

Would this work?

<?php 

    $codeofheight='1600'; //in the real script these variables are set by a series of if statements, determined by info from previous page. 
    $codeofwidth='2ds';

?>


<script>
var codeofheight = <?php echo $codeofheight; ?>
var codeofwidth = <?php echo $codeofwidth; ?>

if(document.images) 
{ 
    bar = new Array();
    for(i=0; i<3; i++)
    {
        bar[i] = new Image();
        bar[i].src = "images/"+codeofwidth+"_"+codeofheight+"_bar" + i + ".gif";
    }
} 

function barsauto1()
{
    if(document.images)
    {
        choose=document.doorglass.door1bars.options[document.doorglass.door1bars.selectedIndex].text.charAt(0);
        document.barswitch1.src = "images/"+codeofwidth+"_"+codeofheight+"_bar"+choose+".gif";
    }
} 

window.onerror = null; 
</script>

So the value of both those variables is not being echoed along with the rest of the form?

No i only need the variables on this script. They are derived from session variables so i can use them wherever on the site i like.

Unfortuanately var codeofheight = <?php echo $codeofheight; ?> doesn't seem to make any difference. I think i may have misled when i said replacing the variables works. what does work is this:

if(document.images) 
{ 
bar = new Array() 
for(i=0;i<3;i++) 
{ 
bar[i] = new Image() 
bar[i].src = "images/"2ds_1800_bar" + i + ".gif" 
} } 
function barsauto1() 
{ if(document.images) { choose=document.doorglass.door1bars.options[document.doorglass.door1bars.selectedIndex].text.charAt(0) 
document.barswitch1.src = "images/2ds_1800_bar"+choose+".gif" } } 
window.onerror = null; 

and what doesnt work is this:

var codeofheight = 1800;
var codeofwidth  = 2ds;  

if(document.images) 
{ 
bar = new Array() 
for(i=0;i<3;i++) 
{ 
bar[i] = new Image() 
bar[i].src = "images/"+codeofwidth+"_"+codeofheight+"_bar" + i + ".gif" 
} } 
function barsauto1() 
{ if(document.images) { choose=document.doorglass.door1bars.options[document.doorglass.door1bars.selectedIndex].text.charAt(0) 
document.barswitch1.src = "images/"+codeofwidth+"_"+codeofheight+"_bar"+choose+".gif" } } 
window.onerror = null;

I cant understand why it wouldn't though.

I didnt know that it is about strings. The following should be working

<?php 

    $codeofheight='1600'; //in the real script these variables are set by a series of if statements, determined by info from previous page. 
    $codeofwidth='2ds';

?>

<script>
var codeofheight = "<?php echo $codeofheight; ?>";
var codeofwidth = "<?php echo $codeofwidth; ?>";

if(document.images) 
{ 
    bar = new Array();
    for(i=0; i<3; i++)
    {
        bar[i] = new Image();
        bar[i].src = "images/"+codeofwidth+"_"+codeofheight+"_bar" + i + ".gif";
    }
} 

function barsauto1()
{
    if(document.images)
    {
        choose=document.doorglass.door1bars.options[document.doorglass.door1bars.selectedIndex].text.charAt(0);
        document.barswitch1.src = "images/"+codeofwidth+"_"+codeofheight+"_bar"+choose+".gif";
    }
} 

window.onerror = null; 
</script>

I cant undertand why it wont work. It looks like sensible coide to me. Ive settled for this horrendously long route to tackle a simple problem:

PHP Code:

<?php
session_start();
if ($_SESSION[apwidth] <= '1500')
{
       if ($_SESSION[apheight] <='1600')                                  {include('javascript/2ds1600.php');}
  else if ($_SESSION[apheight] <='1800' and $_SESSION[apheight] >= '1601'){include('javascript/2ds1800.php');}
  else if ($_SESSION[apheight] <='2000' and $_SESSION[apheight] >= '1801'){include('javascript/2ds2000.php');}
  else if ($_SESSION[apheight] <='2200' and $_SESSION[apheight] >= '2001'){include('javascript/2ds2200.php');}
  else if ($_SESSION[apheight] <='2480' and $_SESSION[apheight] >= '2201'){include('javascript/2ds2480.php');}
}
else if ($_SESSION[apwidth] <= '2100' and $_SESSION[apwidth] >= '1501')
{
       if ($_SESSION[apheight] <='1600')                                  {include('javascript/2dl1600.php');}
  else if ($_SESSION[apheight] <='1800' and $_SESSION[apheight] >= '1601'){include('javascript/2dl1800.php');}
  else if ($_SESSION[apheight] <='2000' and $_SESSION[apheight] >= '1801'){include('javascript/2dl2000.php');}
  else if ($_SESSION[apheight] <='2200' and $_SESSION[apheight] >= '2001'){include('javascript/2dl2200.php');}
  else if ($_SESSION[apheight] <='2480' and $_SESSION[apheight] >= '2201'){include('javascript/2dl2480.php');}
}
else if ($_SESSION[apwidth] <= '2550' and $_SESSION[apwidth] >= '2101')
{
       if ($_SESSION[apheight] <='1600')                                  {include('javascript/3ds1600.php');}
  else if ($_SESSION[apheight] <='1800' and $_SESSION[apheight] >= '1601'){include('javascript/3ds1800.php');}
  else if ($_SESSION[apheight] <='2000' and $_SESSION[apheight] >= '1801'){include('javascript/3ds2000.php');}
  else if ($_SESSION[apheight] <='2200' and $_SESSION[apheight] >= '2001'){include('javascript/3ds2200.php');}
  else if ($_SESSION[apheight] <='2480' and $_SESSION[apheight] >= '2201'){include('javascript/3ds2480.php');}
}
else if ($_SESSION[apwidth] <= '3150' and $_SESSION[apwidth] >= '2551')
{
       if ($_SESSION[apheight] <='1600')                                  {include('javascript/3dl1600.php');}
  else if ($_SESSION[apheight] <='1800' and $_SESSION[apheight] >= '1601'){include('javascript/3dl1800.php');}
  else if ($_SESSION[apheight] <='2000' and $_SESSION[apheight] >= '1801'){include('javascript/3dl2000.php');}
  else if ($_SESSION[apheight] <='2200' and $_SESSION[apheight] >= '2001'){include('javascript/3dl2200.php');}
  else if ($_SESSION[apheight] <='2480' and $_SESSION[apheight] >= '2201'){include('javascript/3dl2480.php');}
}
else if ($_SESSION[apwidth] <= '3600' and $_SESSION[apwidth] >= '3151')
{
       if ($_SESSION[apheight] <='1600')                                  {include('javascript/4ds1600.php');}
  else if ($_SESSION[apheight] <='1800' and $_SESSION[apheight] >= '1601'){include('javascript/4ds1800.php');}
  else if ($_SESSION[apheight] <='2000' and $_SESSION[apheight] >= '1801'){include('javascript/4ds2000.php');}
  else if ($_SESSION[apheight] <='2200' and $_SESSION[apheight] >= '2001'){include('javascript/4ds2200.php');}
  else if ($_SESSION[apheight] <='2480' and $_SESSION[apheight] >= '2201'){include('javascript/4ds2480.php');}
}
else if ($_SESSION[apwidth] <= '4200' and $_SESSION[apwidth] >= '3601')
{
       if ($_SESSION[apheight] <='1600')                                  {include('javascript/4dl1600.php');}
  else if ($_SESSION[apheight] <='1800' and $_SESSION[apheight] >= '1601'){include('javascript/4dl1800.php');}
  else if ($_SESSION[apheight] <='2000' and $_SESSION[apheight] >= '1801'){include('javascript/4dl2000.php');}
  else if ($_SESSION[apheight] <='2200' and $_SESSION[apheight] >= '2001'){include('javascript/4dl2200.php');}
  else if ($_SESSION[apheight] <='2480' and $_SESSION[apheight] >= '2201'){include('javascript/4dl2480.php');}
}
else if ($_SESSION[apwidth] <= '4650' and $_SESSION[apwidth] >= '4201')
{
       if ($_SESSION[apheight] <='1600')                                  {include('javascript/5ds1600.php');}
  else if ($_SESSION[apheight] <='1800' and $_SESSION[apheight] >= '1601'){include('javascript/5ds1800.php');}
  else if ($_SESSION[apheight] <='2000' and $_SESSION[apheight] >= '1801'){include('javascript/5ds2000.php');}
  else if ($_SESSION[apheight] <='2200' and $_SESSION[apheight] >= '2001'){include('javascript/5ds2200.php');}
  else if ($_SESSION[apheight] <='2480' and $_SESSION[apheight] >= '2201'){include('javascript/5ds2480.php');}
}
else if ($_SESSION[apwidth] <= '5000' and $_SESSION[apwidth] >= '4651')
{
       if ($_SESSION[apheight] <='1600')                                  {include('javascript/5dl1600.php');}
  else if ($_SESSION[apheight] <='1800' and $_SESSION[apheight] >= '1601'){include('javascript/5dl1800.php');}
  else if ($_SESSION[apheight] <='2000' and $_SESSION[apheight] >= '1801'){include('javascript/5dl2000.php');}
  else if ($_SESSION[apheight] <='2200' and $_SESSION[apheight] >= '2001'){include('javascript/5dl2200.php');}
  else if ($_SESSION[apheight] <='2480' and $_SESSION[apheight] >= '2201'){include('javascript/5dl2480.php');}
}

and each one of the include statements looks something like this

<SCRIPT LANGUAGE="JavaScript" 
TYPE="text/javascript"> 
<!-- 

if(document.images) 
{ 
bar = new Array() 
for(i=0;i<3;i++) 
{ 
bar[i] = new Image() 
bar[i].src = "images/large_1800_bar" + i + ".gif" 
} } 
function barsauto1() 
    { if(document.images) { 
    choose=document.doorglass.door1bars.options[document.doorglass.door1bars.selectedIndex].text.charAt(0) 
    document.barswitch1.src = "images/large_1800_bar"+choose+".gif" 
    } } 
    window.onerror = null; 
function barsauto2() 
    { if(document.images) { 
    choose=document.doorglass.door2bars.options[document.doorglass.door2bars.selectedIndex].text.charAt(0) 
    document.barswitch2.src = "images/large_1800_bar"+choose+".gif" 
    } } 
    window.onerror = null; 
function barsauto3() 
    { if(document.images) { 
    choose=document.doorglass.door3bars.options[document.doorglass.door3bars.selectedIndex].text.charAt(0) 
    document.barswitch3.src = "images/large_1800_bar"+choose+".gif" 
    } } 
    window.onerror = null; 
function barsauto4() 
    { if(document.images) { 
    choose=document.doorglass.door4bars.options[document.doorglass.door4bars.selectedIndex].text.charAt(0) 
    document.barswitch4.src = "images/large_1800_bar"+choose+".gif" 
    } } 
    window.onerror = null; 

//--> 
</SCRIPT>

If anyone has any advice regarding this please let me know. It works as it is but i feel there is a shorter and simpler way around this

Thanks for looking

Running the code I posted in http://www.webmaster-talk.com/212008-post5.html, what HTML does it output?

It doesnt output any html, it just stops the image selector from working.

its these 2 bits of the code that stop it from working,

     "images/"+codeofwidth+"_"+codeofheight+"_bar" + i + ".gif";
     "images/"+codeofwidth+"_"+codeofheight+"_bar"+choose+".gif";

if i replaced codeofwidth and codeofheight with actual values it seems to work:

"images/2ds_1800_bar" + i + ".gif";
"images/2ds_1800_bar"+choose+".gif";

Il post up the answer if i ever find it

Did you look at the source of the generated HTML?

Oh yeah id not tried viewing source
i just moved the <script></script> from the head section so that it appears after the $codeofwidth and $codeofheight variables are set. it now shows up in the source code as '2ds 1600 not $codeofwdith $codeofheight

Thanks for your help

Is that what you wanted?

It led me to the problem yes. Thanks