Resolved Getting a variable to pass in a function parameter? [Archive]

...

View Full Version : Resolved Getting a variable to pass in a function parameter?

tcsnguy08

05-26-2009, 11:13 PM

Hello everyone.

Thanks in advance for any help someone can give me. First I will explain a little about what I want to do. I have a javascript will a) look for a certain value in a drop down box and b) depending on what value is selected open up a div that includes link that when moused over will pop up with an alert box contain the passed parameter. A couple problems with this, one is I am not as sharp on Javascript as I am on PHP, and two, when I manually place a value into the function parameter, if it's a number it works fine, but if its a string or word, it comes up with an undefined error. Can someone please help me find why the undefined error is coming up only on strings or words? Thanks again. I am using PHP so sorry for the \escapes.

echo"<head>
<script type=\"text/javascript\">

/* This function displays the div and writes the appropriate HTML. */

function Makediv(){
var boxvalue = document.getElementById('choose').value;
if (boxvalue == '1'){
document.getElementById('choices').style.display = 'inline';
document.getElementById('choices').innerHTML = '<a href=\"index.php\" onmouseover=\"Test($band[1])\">Hello</a>';
} else if (boxvalue == '2'){
document.getElementById('choices').style.display = 'inline';
document.getElementById('choices').innerHTML = '<a href=\"index.php\" onmouseover=\"Test($band[2])\">goodbye</a>';
} else {
document.getElementById('choices').style.display = 'none';
}
}

/* This function pops up with an alert when the link is mousedover. The alert should display the parameter passed in Test() Doesn't work comes back with an undefined error */

function Test(bandname){
var band = bandname;
alert(band);
}

/* Here is the HTML for the page */

</script>
</head>
<body><form action=\"#\"><select name=\"choose\" id=\"choose\" onchange=\"Makediv()\"><option value=\"\" selected>SELECT</option><option value=\"1\">".$band[1]."</option><option value=\"2\">".$band[2]."</option></select></form><br><br><div style=\"border : solid 1px #888888; background : #000000; color : #ffffff; padding : 4px; width : 500px; height : 200px; overflow : auto; display:none; \" name=\"choices\" id=\"choices\"></div></body>";

Old Pedant

05-26-2009, 11:35 PM

Is there a REASON you use echo to dump out what is almost 100% HTML code???

Would be much simpler to write it *AS* HTML.

Anyway, the problem is simple:

Let's say that the value of your PHP $band[1] variable is "foobar".

So you generate this in the HTML code:

<a href="index.php" onmouseover="Test(foobar)">Hello</a>

And, just *exactly* like PHP code, JavaScript requires quotes around string values. So you need to have:

<a href="index.php" onmouseover="Test('foobar')">Hello</a>

I would have written all that code thus:

// end the PHP code first:
?>

<head>
<script type="text/javascript">

/* This function displays the div and writes the appropriate HTML. */

function Makediv()
{
var boxvalue = document.getElementById('choose').value;
if (boxvalue == '1' || boxvalue == '2' )
{
var word = ( boxvalue == '1' ? "Hello" : "goodbye" );
var band = ( boxvalue == '1' ? "<?=$band[1]?>" : "<?=$band[2]?>" );
document.getElementById('choices').style.display = 'inline';
document.getElementById('choices').innerHTML =
'<a href="index.php" onmouseover="Test(\'' + band + '\')">' + word + '</a>';
} else {
document.getElementById('choices').style.display = 'none';
}
}
/* Here is the HTML for the page */
</script>
</head>
<body>
<form action="#">
<select name="choose" id="choose" onchange="Makediv()">
<option value="" selected>SELECT</option>
<option value="1"><?=$band[1]?></option>
<option value="2"><?=$band[2]?></option>
</select>
</form>
<br><br>
<div style="border:solid 1px #888888; background:#000000; color:#ffffff; padding:4px;
width:500px; height:200px; overflow:auto; display:none;" id="choices"
></div>
</body>

tcsnguy08

05-26-2009, 11:41 PM

Thanks for the quick response I will try it out and get back to you. I have it echoed because the full page is a php page, I have a bunch of other forms and such that use php variables and I just usually use the echo to echo all code to the page if the page is a php. I will be back in a while to let you know how it worked. :)

tcsnguy08

05-26-2009, 11:57 PM

Thanks it seems to be working now. I appreciate the quick response.

Old Pedant

05-26-2009, 11:58 PM

Actually, I guess I would have simplified it even further:

// end the PHP code first:
?>

<head>
<script type="text/javascript">

/* This function displays the div and writes the appropriate HTML. */

function Makediv(sel)
{
var boxvalue = sel.value;
if (boxvalue != "")
{
document.getElementById('choices').style.display = 'inline';
document.getElementById('WORD').innerHTML = boxvalue;
} else {
document.getElementById('choices').style.display = 'none';
}
}

function ShowChoice( )
{
var ch = document.TheForm.choose;
alert( ch.options[ch.selectedIndex].text );
}
</script>
</head>
<body>
<form name="TheForm" action="#">
<select name="choose" onchange="Makediv(this)">
<option>SELECT</option>
<option value="Hello"><?=$band[1]?></option>
<option value="Goodbye"><?=$band[2]?></option>
</select>
</form>
<br><br>
<div style="border:solid 1px #888888; background:#000000; color:#ffffff; padding:4px;
width:500px; height:200px; overflow:auto; display:none;" id="choices"
>
<a href="index.php" onmouseover="ShowChoice( );"><span id="WORD"></span></a>
</div>
</body>

How's that for sneaky?

Old Pedant

05-27-2009, 12:00 AM

Each to his own, I suppose. But I always believe it's easier to debug when as little of my HTML is in the server-side language as possible.

If you ever coded with something like Tapestry (for JSP), you wouldn't have a choice: No inline server-side code allowed, even. Dunno what's out there for PHP that's equivalent.