Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Getting a variable to pass in a function parameter?

    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.

    PHP Code:
    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>"
    Last edited by tcsnguy08; 05-27-2009 at 01:01 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    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:
    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:
    Code:
    <a href="index.php" onmouseover="Test('foobar')">Hello</a>
    I would have written all that code thus:
    Code:
    // end the PHP code first:
    ?>
    <!-- then use just HTML -->
    <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>

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks it seems to be working now. I appreciate the quick response.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    Actually, I guess I would have simplified it even further:
    Code:
    // end the PHP code first:
    ?>
    <!-- then use just HTML -->
    <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?

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •