#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Location
    cebu city
    Posts
    2
    Rep Power
    0

    Exclamation how do u pass a php array into a javascript?


    good day!

    need ur help!
    how do u pass a php array into a javascript?
    cod u escape php code inside a javascript tag?

    tnx...
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Location
    Canada
    Posts
    48
    Rep Power
    12
    PHP code is executed before the page gets to the browser, javascript is executed by the browser once it recieves the output of the php.

    If you want to pass variables from php to javascript, you need to print / echo the <script> contents and populate with whatever values you need

    simple example:
    PHP Code:
    $phparray = array(1,2,3,4);
    print 
    '<script>';
    print 
    'var jsArray = ['.$phparray[0].','.$phparray[0].']';
    print 
    '</script>'
    the above will create a 2 item javascript array containing the
    first two values of the $phparray
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    16
    Rep Power
    0
    Here's a nice little snippet of code that someone wrote for me - I'm sure you can use it for your purposes - this one changes the second <select> based on what is selected in the first

    PHP Code:
    <tr> 
        <td height="142" width="63%" bgcolor="fef0e0"> 
          <div align="center"> 
            <p><font face="Arial, Helvetica, sans-serif" size="-1">To search our current 
              job postings, please select a category. You may also select a subcategory. 
              Click on the corresponding magnifying glass to submit your search.</font> 
            </p>
            <p> 
              <?php
          
        
    //read the database 
         
        
    $result mysql_query("SELECT tblCategory.Category,tblSubCategory.CategoryID,tblSubCategory.SubCat,tblSubCategory.SubCatID FROM tblSubCategory,tblCategory WHERE tblSubCategory.CategoryID=tblCategory.CategoryID"); 
         
         
        
    //write the table 
         
        
    echo "<table width=\"200\" border=\"0\" cellpadding=\"5\" cellspacing=\"5\">"
         
        
    // write the category's listbox... 
         
        
    echo "<form name=\"f1\" action=\"postings.php\" method=\"post\"><tr><td valign=\"middle\" align=\"center\"><font color=\"#000000\" face=\"verdana,arial,helvetica\" size=\"2\">Category</font></td><td>";
        echo 
    "<select name=\"CategoryID\" size=\"1\" onchange=\"categoryselected(this);\">\n"
         
        
    // write the entry code for the javascript...\n is used to force a new line so the resultant code is more readable 
      
        
    $sJavaScript "function categoryselected(elem){\n for (var i = document.f2.SubCatID.options.length; i >= 0; i--){ \n document.f2.SubCatID.options[i] = null;\n"
         
        
    // loop through the database.. 
         
        
    $sLastCategory=""
            echo 
    "<option value=\"#\" selected>Select Category</option>"
         
        while ( 
    $row mysql_fetch_array($result)) 
            {  
                
    // is this a new category? 
                 
                    
    If ($sLastCategory!=$row["Category"]){  
                 
                
    // if yes, add the entry to the category listbox 
         
                    
    $sLastCategory $row["Category"]; 
                 
                    echo 
    "\n<option value='".$row["CategoryID"]."'>".$sLastCategory."</option>"
         
                
    // and add a new section to the javascript... 

                    
    $sJavaScript $sJavaScript."}\n"."if (elem.options[elem.selectedIndex].value==".$row["CategoryID"]."){\n"
             
                } 

               
    // and add a new subcategory line to the javascript 

                    
    $sJavaScript $sJavaScript."document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('".$row["SubCat"]."','".$row["SubCatID"]."');\n"
            } 

                
    // finish the category's listbox 
              
             
    echo "</select>&nbsp;&nbsp;<input type=\"image\" src=\"../images/careers/jobsearch.gif\" alt=\"Search\" name=\"Search\" value=\"SUBMIT\"></td></tr></form>"
         
        
    // create the subcategory listbox for no selection 

        
    echo "\n<form name=\"f2\" action=\"postings_sub.php\" method=\"post\"><tr><td valign=\"center\" align=\"center\"><font color=\"#000000\" face=\"verdana,arial,helvetica\" size=\"2\">SubCategory</font></td>";
        echo 
    "<td><select name=\"SubCatID\" size=\"1\">"
        echo 
    "<option>[no subcategory selected]</option>"
        echo 
    "</select>&nbsp;&nbsp;<input type=\"image\" src=\"../images/careers/jobsearch.gif\" alt=\"Search\" name=\"Search\" value=\"SUBMIT\"></td></tr>"
        echo 
    "<tr><td align=\"center\" colspan=\"2\"> <font face=\"verdana,arial,helvetica\"></font></td></tr></form>"
        echo 
    "</table>"
         
        
    // finish the javascript and write out 
         
        
    $sJavaScript $sJavaScript."\n}\n}\n"
        echo 
    "\n<SCRIPT LANGUAGE=\"JavaScript\">";  
        echo 
    "\n".$sJavaScript."\n</SCRIPT>\n"
         
        
    //close the form 
         
        
    echo "</FORM></center>"
             
        if (
    "SUBMIT" == $submitsubcat){ 
         
        echo 
    "<font color=\"#000000\" face=\"verdana,arial,helvetica\" size=\"2\">Your Selected Category index= ".$Category."</font><br>";  
        echo 
    "<font color=\"#000000\" face=\"verdana,arial,helvetica\" size=\"2\">Your Selected SubCategory index= ".$SubCat."</font><br>"
         
        } 
         
        
    ?>
            </p>
          </div>
        </td>
      </tr>
  6. #4
  7. No Profile Picture
    Dissident
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Mar 2003
    Location
    New York
    Posts
    1,671
    Rep Power
    49
    EsmereldaPea, we have no idea what his purposes are, why do you think that your code will fit his needs?

    dagski:

    What you want to do is loop through your array in php and print out the values for javascript. Something along these lines should be good:

    PHP Code:
    <SCRIPT>

    javascriptArray = new Array();

    <?php

    $array 
    = ( 'list''of''elements' );

    foreach ( 
    $array as $element )
    {
        print 
    "javascriptArray.push( $element );";
    }

    ?>

    </SCRIPT>
    When this is run, it will make code like this:

    PHP Code:
    <SCRIPT>

    javascriptArray = new Array();

    javascriptArray.push'list' );
    javascriptArray.push'of');
    javascriptArray.push'elements' );

    </SCRIPT> 
    There are plenty of other ways to do this as well.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    16
    Rep Power
    0

    Well, my dear Draelon . . .


    Originally posted by draelon
    [B]EsmereldaPea, we have no idea what his purposes are, why do you think that your code will fit his needs?
    What makes you think it won't?

    This code was originally created to have the user select a country, and then the 2nd box would list the cities in that country.

    Some of us aren't that great at coding, and I myself am better at tweaking real-world examples than at using generic examples. Just thought it might help the guy out. Someone helped me out on this board - just trying to give back. I'll mind my own business if I'm gonna get flamed.

    At any rate, the resulting HTML code goes like this:

    Code:
    <tr> 
        <td > 
          <div align="center"> 
            <p><font face="Arial, Helvetica, sans-serif" size="-1">To search our current 
              job postings, please select a category. You may also select a subcategory. 
              Click on the corresponding magnifying glass to submit your search.</font> 
            </p>
            <p> 
              <table width="200" border="0" cellpadding="5" cellspacing="5"><form name="f1" action="postings.php" method="post"><tr><td valign="middle" align="center"><font color="#000000" face="verdana,arial,helvetica" size="2">Category</font></td><td><select name="CategoryID" size="1" onchange="categoryselected(this);">
    <option value="#" selected>Select Category</option>
    <option value='1'>Clerical</option>
    <option value='2'>Management</option>
    <option value='3'>Nursing</option>
    <option value='4'>Professional</option>
    <option value='5'>Support Services</option>
    <option value='6'>Technical</option></select>&nbsp;&nbsp;<input type="image" src="../images/careers/jobsearch.gif" alt="Search" name="Search" value="SUBMIT"></td></tr></form>
    <form name="f2" action="postings_sub.php" method="post"><tr><td valign="center" align="center"><font color="#000000" face="verdana,arial,helvetica" size="2">SubCategory</font></td><td><select name="SubCatID" size="1"><option>[no subcategory selected]</option></select>&nbsp;&nbsp;<input type="image" src="../images/careers/jobsearch.gif" alt="Search" name="Search" value="SUBMIT"></td></tr><tr><td align="center" colspan="2"> <font face="verdana,arial,helvetica"></font></td></tr></form></table>
    <SCRIPT LANGUAGE="JavaScript">
    function categoryselected(elem){
     for (var i = document.f2.SubCatID.options.length; i >= 0; i--){ 
     document.f2.SubCatID.options[i] = null;
    }
    if (elem.options[elem.selectedIndex].value==1){
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Medical Record Clerk','1');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Medical Transcriptionist','2');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Patient Accounting Clerk','3');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Receptionist/Clerk','4');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Registration Clerk','5');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Unit Secretary','6');
    }
    if (elem.options[elem.selectedIndex].value==2){
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Manager Nursing Administration','7');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Director, Patient Care Services','8');
    }
    if (elem.options[elem.selectedIndex].value==3){
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Registered Nurse','9');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('RN-Supplemental Staff/Contingent','10');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('RN-In-House Agency','11');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Wound Care/Stomal Therapist','12');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('CRNA','13');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Nurse Tech','14');
    }
    if (elem.options[elem.selectedIndex].value==4){
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Clinical Coordinator','15');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Medical Technologist','16');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Occupational Therapist','17');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Pharmacist','18');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Physical Therapist','19');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Professional Development Educator','20');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Speech Pathologist','21');
    }
    if (elem.options[elem.selectedIndex].value==5){
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Clinical Laboratory Assistant','22');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Dietary Assistant','23');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Housekeeping Assistant','24');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Nurse Assistant','25');
    }
    if (elem.options[elem.selectedIndex].value==6){
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Cardiac Ultrasound Technologist','26');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('CAT Scan Technologist','27');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Cath Lab Technologist','28');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Dietary Technician','29');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('ER Tech','30');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Monitor Technician','31');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Nuclear Medicine Technologist','32');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Occupational Therapy Technician','33');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('OR Technician','34');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Pharmacy Technician','35');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Physical Therapy Assistant','36');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Polysomnographic Technician','37');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Respiratory Therapist','38');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Sterile Processing Tech','39');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Technical Partner','40');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('Ultrasound Technologist','41');
    document.f2.SubCatID.options[document.f2.SubCatID.options.length] = new Option('X-Ray Technologist','42');
    
    }
    }
    
    </SCRIPT>
    Hope it helps someone out.
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Location
    cebu city
    Posts
    2
    Rep Power
    0

    Thumbs up


    thanks everybody!! ur posts are greatly appreciated..

    happy scripting everyone
  12. #7
  13. No Profile Picture
    Dissident
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Mar 2003
    Location
    New York
    Posts
    1,671
    Rep Power
    49
    I'm sorry if you felt flamed, you weren't. The simple fact is the original poster asked for help translating a PHP array to a javascript array. Your example doesn't illustrate how to do this. Your example doesn't even employ any basic arrays.

    I agree that tinkering with code is a good way to learn and a good way to get results, but I don't see how the code you provided would be beneficial to someone new to PHP or new to working with arrays.

IMN logo majestic logo threadwatch logo seochat tools logo