Using a Javascript function in PHP Loop

**gulluman1** · 05-25-2010, 10:42 PM

HI,

I am trying to pass a javascript function into a php loop. Can't seem to figure it out as I am not that expert in Javascript. Any help would highly be appreciated. Thanks in advance.

Below is the code. What i am trying to do is, link two dependent select boxes. The second SELECT is dependent on the first one.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  
  <title></title>
  </head>
  <body>
  <table style=" background-color:#ffffff; border-collapse:collapse;" cellspacing='0'>
                
                <tr>
             <td>
               <table style=" background-color:#ffffff; border-collapse:collapse;" cellspacing='0'>
                
                <tr>
                  <td class ='cell'>Value</td>
                  
                  <td class='cell'>Conceptual <br />Domain (Adult)</td>
                  <td class='cell'>Conceptual <br />Sub-Domain (Adult)</td>
                  
                  
                </tr>
                
                
                <?php
                for ($col=1; $col<=15; $col++)
                {
                echo "
                <tr>
                  <td class ='cell'>D - $col</td>
                  
                 
                  <td class='cell'>
                    <select id='dep_var_5_$col' name='dependent_var5_$col' onChange='updatesubdomain5(this.selectedIndex)' style='background-color:#f0fff0;width:100%'>
                        <option value = '' selected='selected'>Select a Domain</option>
                        <option value='0'>Parenting</option>
                        <option value='1'>Emotion</option>
                        <option value='2'>Social</option>
                        <option value='3'>Self</option>
                        <option value='4'>Family</option>
                        <option value='5'>Couple</option>
                        <option value='6'>Parent-professional Relationship</option>
                        <option value='7'>Demographics</option>
                    </select>
                  </td>
                  <td class='cell'>
                    <select id='dep_var_6_$col' name='dependent_var6_$col' style='background-color:#f0fff0;width:100%'>
                        <option value = '' selected='selected'>Select a Domain</option>
                    </select>
                  </td>
                  
                </tr>"; 
                }
                ?>
                <script type="text/javascript">
                
                
                var Id = 'dep_var_5_1';
                var Id2 = 'dep_var_6_1';
                
                var domain5list=document.getElementById(Id);
                var subdomain5list=document.getElementById(Id2);
                
                var subdomain5=new Array()
                subdomain5[0]=""
                subdomain5[1]=["Enacted", "Experienced", "Interaction", "Disability Enacted", "Disability Experienced", "Disability Impact"]
                subdomain5[2]=["Mood/Behaviour",	"Thought Problems",	"Severe Psychopathology", "General"]
                subdomain5[3]=["Support",	"General"]
                subdomain5[4]=["Efficacy", "Self-General"]
                subdomain5[5]=["Competencies", "Interaction", "General", "Disability"]
                subdomain5[6]=["General"]
                subdomain5[7]=["General"]
                subdomain5[8]=["Age", "Income", "Gender", "Education"]
                
                
                function updatesubdomain5(selectedsubdomain5)
                {
                subdomain5list.options.length=0
                if (selectedsubdomain5>0)
                  {
                    for (i=0; i<subdomain5[selectedsubdomain5].length; i++)
                    subdomain5list.options[subdomain5list.options.length]=new Option(subdomain5[selectedsubdomain5][i], subdomain5[selectedsubdomain5][i])
                  }
                }
                
                </script>
                
                
                
               </table>
             </td>
           </tr> 
           
          
           
         </table>


  </body>
</html>

**djr33** · 05-25-2010, 11:05 PM

I'm not quite sure I understand your question.

I am trying to pass a javascript function into a php loop.

What do you mean by that?

In what you have, here is what will happen:
1. The PHP will execute and generate some extra HTML on the page.
2. The server will send the code to the browser.
3. The browser will display the html.
4. The browser will run the Javascript.
[The Javascript cannot interact with the PHP again until the page reloads-- this is true of all* javascript, not just this code.]

*The only case in which you can make PHP work without reloading the page is to send a different kind of "reload" command: do a behind-the-scenes request for data from the server using Javascript. The most popular method is called Ajax. If that sounds like what you're looking for, then you'll find lots of info on google and throughout these forums. It's a big topic, though, so no point into getting into it here.

In order to separate the two languages, it's best not to post PHP and Javascript together.
Instead, use view>source to see what is actually being generated.
Then post that and ask a question about Javascript.
Or, if you see that something is wrong in the generated source, post the PHP code and the DESIRED Javascript output so we can find what's wrong with your PHP.

**gulluman1** · 05-26-2010, 06:15 AM

Thanks for your reply.
Sorry as i couldn't explain properly. To clarify, I wanted "onChange='updatesubdomain5(this.selectedIndex)' " to work for each of the SELECT boxes in each row but seems like that is not happening since the same function is being passed and so each pair is not behaving as it should be.
I understand JavaScript is client side and PHP is server, i just wanted to avoid writing the JavaScript function(in this case updatesubdomain5) for each of the Selectboxes(e.g. dep_var_5_1, dep_var_5_2, dep_var_5_3......). I am attaching the code from View-->Source below if that helps to understand.
So to rephrase my question, how can I avoid writing separate JS function for the dependent SELECT boxes in each of the row? Is there a way to load the whole html and then assign the Change behavior to each of the dependent Select boxes?

Many thanks again!!

Abu

**gulluman1** · 05-26-2010, 06:21 AM

I am attaching the View Source as its too long....

**gulluman1** · 05-26-2010, 02:45 PM

Thank you very much. I sorted out a solution. Below is the page source. The dependent Select boxes works now. Thanks.
What i did is got the whole script under the PHP loop and assigned unique name for the function using the loop variable.

Please let me know if using JS and PHP this way is efficient/standard. I am not into AJAX yet but will be soon.

HTML Code:

<table style=" background-color:#ffffff; border-collapse:collapse;" cellspacing='0'>
                
                <tr>
             <td>
               <table style=" background-color:#ffffff; border-collapse:collapse;" cellspacing='0'>
                
                <tr>
                  <td class ='cell'>Value</td>
                  
                  <td class='cell'>Conceptual <br />Domain (Adult)</td>
                  <td class='cell'>Conceptual <br />Sub-Domain (Adult)</td>
                 </tr>
                                <tr>
                  <td class ='cell'>D - 1</td>
                  
                 
                  <td class='cell'>
                    <select id='dep_var_5_1' name='dependent_var5_1' onChange='updatesubdomain5_1(this.selectedIndex)' style='background-color:#f0fff0;width:100%'>
                        <option value = '' selected='selected'>Select a Domain</option>
                        <option value='0'>Parenting</option>
                        <option value='1'>Emotion</option>
                        <option value='2'>Social</option>
                        <option value='3'>Self</option>
                        <option value='4'>Family</option>
                        <option value='5'>Couple</option>
                        <option value='6'>Parent-professional Relationship</option>
                        <option value='7'>Demographics</option>
                    </select>
                  </td>
                  <td class='cell'>
                    <select id='dep_var_6_1' name='dependent_var6_1' style='background-color:#f0fff0;width:100%'>
                        <option value = '' selected='selected'>Select a Domain</option>
                    </select>
                  </td>
                  
                </tr>                  <script type="text/javascript">
                
                
                var Id = 'dep_var_5_1';
                var Id2 = 'dep_var_6_1';
                
                var domain5_1list=document.getElementById(Id);
                var subdomain5_1list=document.getElementById(Id2);
                
                var subdomain5_1=new Array()
                subdomain5_1[0]=""
                subdomain5_1[1]=["Enacted", "Experienced", "Interaction", "Disability Enacted", "Disability Experienced", "Disability Impact"]
                subdomain5_1[2]=["Mood/Behaviour",	"Thought Problems",	"Severe Psychopathology", "General"]
                subdomain5_1[3]=["Support",	"General"]
                subdomain5_1[4]=["Efficacy", "Self-General"]
                subdomain5_1[5]=["Competencies", "Interaction", "General", "Disability"]
                subdomain5_1[6]=["General"]
                subdomain5_1[7]=["General"]
                subdomain5_1[8]=["Age", "Income", "Gender", "Education"]
                
                
                function updatesubdomain5_1(selectedsubdomain5_1list)
                {
                subdomain5_1list.options.length=0
                if (selectedsubdomain5_1list>0)
                  {
                    for (i=0; i< subdomain5_1[selectedsubdomain5_1list].length; i++)
                    subdomain5_1list.options[subdomain5_1list.options.length]=new Option(subdomain5_1[selectedsubdomain5_1list][i], subdomain5_1[selectedsubdomain5_1list][i])
                  }
                }
                
                </script>
                
                <tr>
                  <td class ='cell'>D - 2</td>
                  
                 
                  <td class='cell'>
                    <select id='dep_var_5_2' name='dependent_var5_2' onChange='updatesubdomain5_2(this.selectedIndex)' style='background-color:#f0fff0;width:100%'>
                        <option value = '' selected='selected'>Select a Domain</option>
                        <option value='0'>Parenting</option>
                        <option value='1'>Emotion</option>
                        <option value='2'>Social</option>
                        <option value='3'>Self</option>
                        <option value='4'>Family</option>
                        <option value='5'>Couple</option>
                        <option value='6'>Parent-professional Relationship</option>
                        <option value='7'>Demographics</option>
                    </select>
                  </td>
                  <td class='cell'>
                    <select id='dep_var_6_2' name='dependent_var6_2' style='background-color:#f0fff0;width:100%'>
                        <option value = '' selected='selected'>Select a Domain</option>
                    </select>
                  </td>
                  
                </tr>                  <script type="text/javascript">
                
                
                var Id = 'dep_var_5_2';
                var Id2 = 'dep_var_6_2';
                
                var domain5_2list=document.getElementById(Id);
                var subdomain5_2list=document.getElementById(Id2);
                
                var subdomain5_2=new Array()
                subdomain5_2[0]=""
                subdomain5_2[1]=["Enacted", "Experienced", "Interaction", "Disability Enacted", "Disability Experienced", "Disability Impact"]
                subdomain5_2[2]=["Mood/Behaviour",	"Thought Problems",	"Severe Psychopathology", "General"]
                subdomain5_2[3]=["Support",	"General"]
                subdomain5_2[4]=["Efficacy", "Self-General"]
                subdomain5_2[5]=["Competencies", "Interaction", "General", "Disability"]
                subdomain5_2[6]=["General"]
                subdomain5_2[7]=["General"]
                subdomain5_2[8]=["Age", "Income", "Gender", "Education"]
                
                
                function updatesubdomain5_2(selectedsubdomain5_2list)
                {
                subdomain5_2list.options.length=0
                if (selectedsubdomain5_2list>0)
                  {
                    for (i=0; i< subdomain5_2[selectedsubdomain5_2list].length; i++)
                    subdomain5_2list.options[subdomain5_2list.options.length]=new Option(subdomain5_2[selectedsubdomain5_2list][i], subdomain5_2[selectedsubdomain5_2list][i])
                  }
                }
                
                </script>
                
                <tr>
                  <td class ='cell'>D - 3</td>
                  
                 
                  <td class='cell'>
                    <select id='dep_var_5_3' name='dependent_var5_3' onChange='updatesubdomain5_3(this.selectedIndex)' style='background-color:#f0fff0;width:100%'>
                        <option value = '' selected='selected'>Select a Domain</option>
                        <option value='0'>Parenting</option>
                        <option value='1'>Emotion</option>
                        <option value='2'>Social</option>
                        <option value='3'>Self</option>
                        <option value='4'>Family</option>
                        <option value='5'>Couple</option>
                        <option value='6'>Parent-professional Relationship</option>
                        <option value='7'>Demographics</option>
                    </select>
                  </td>
                  <td class='cell'>
                    <select id='dep_var_6_3' name='dependent_var6_3' style='background-color:#f0fff0;width:100%'>
                        <option value = '' selected='selected'>Select a Domain</option>
                    </select>
                  </td>
                  
                </tr>                  <script type="text/javascript">
                
                
                var Id = 'dep_var_5_3';
                var Id2 = 'dep_var_6_3';
                
                var domain5_3list=document.getElementById(Id);
                var subdomain5_3list=document.getElementById(Id2);
                
                var subdomain5_3=new Array()
                subdomain5_3[0]=""
                subdomain5_3[1]=["Enacted", "Experienced", "Interaction", "Disability Enacted", "Disability Experienced", "Disability Impact"]
                subdomain5_3[2]=["Mood/Behaviour",	"Thought Problems",	"Severe Psychopathology", "General"]
                subdomain5_3[3]=["Support",	"General"]
                subdomain5_3[4]=["Efficacy", "Self-General"]
                subdomain5_3[5]=["Competencies", "Interaction", "General", "Disability"]
                subdomain5_3[6]=["General"]
                subdomain5_3[7]=["General"]
                subdomain5_3[8]=["Age", "Income", "Gender", "Education"]
                
                
                function updatesubdomain5_3(selectedsubdomain5_3list)
                {
                subdomain5_3list.options.length=0
                if (selectedsubdomain5_3list>0)
                  {
                    for (i=0; i< subdomain5_3[selectedsubdomain5_3list].length; i++)
                    subdomain5_3list.options[subdomain5_3list.options.length]=new Option(subdomain5_3[selectedsubdomain5_3list][i], subdomain5_3[selectedsubdomain5_3list][i])
                  }
                }
                
                </script>
                                
               </table>
             </td>
           </tr> 
           
          
           
         </table>

**gulluman1** · 05-26-2010, 02:50 PM

here is the PHP code....

HTML Code:

<table style=" background-color:#ffffff; border-collapse:collapse;" cellspacing='0'>
                
                <tr>
             <td>
               <table style=" background-color:#ffffff; border-collapse:collapse;" cellspacing='0'>
                
                <tr>
                  <td class ='cell'>Value</td>
                  
                  <td class='cell'>Conceptual <br />Domain (Adult)</td>
                  <td class='cell'>Conceptual <br />Sub-Domain (Adult)</td>
                  
                  
                </tr>
                
                
                <?php
                for ($col=1; $col<=3; $col++)
                {
                echo "
                <tr>
                  <td class ='cell'>D - $col</td>
                  
                 
                  <td class='cell'>
                    <select id='dep_var_5_$col' name='dependent_var5_$col' onChange='updatesubdomain5_$col(this.selectedIndex)' style='background-color:#f0fff0;width:100%'>
                        <option value = '' selected='selected'>Select a Domain</option>
                        <option value='0'>Parenting</option>
                        <option value='1'>Emotion</option>
                        <option value='2'>Social</option>
                        <option value='3'>Self</option>
                        <option value='4'>Family</option>
                        <option value='5'>Couple</option>
                        <option value='6'>Parent-professional Relationship</option>
                        <option value='7'>Demographics</option>
                    </select>
                  </td>
                  <td class='cell'>
                    <select id='dep_var_6_$col' name='dependent_var6_$col' style='background-color:#f0fff0;width:100%'>
                        <option value = '' selected='selected'>Select a Domain</option>
                    </select>
                  </td>
                  
                </tr>";
                  ?>
                  <script type="text/javascript">
                
                
                var Id = 'dep_var_5_<?php echo $col; ?>';
                var Id2 = 'dep_var_6_<?php echo $col; ?>';
                
                var domain5_<?php echo $col; ?>list=document.getElementById(Id);
                var subdomain5_<?php echo $col; ?>list=document.getElementById(Id2);
                
                var subdomain5_<?php echo $col; ?>=new Array()
                subdomain5_<?php echo $col; ?>[0]=""
                subdomain5_<?php echo $col; ?>[1]=["Enacted", "Experienced", "Interaction", "Disability Enacted", "Disability Experienced", "Disability Impact"]
                subdomain5_<?php echo $col; ?>[2]=["Mood/Behaviour",	"Thought Problems",	"Severe Psychopathology", "General"]
                subdomain5_<?php echo $col; ?>[3]=["Support",	"General"]
                subdomain5_<?php echo $col; ?>[4]=["Efficacy", "Self-General"]
                subdomain5_<?php echo $col; ?>[5]=["Competencies", "Interaction", "General", "Disability"]
                subdomain5_<?php echo $col; ?>[6]=["General"]
                subdomain5_<?php echo $col; ?>[7]=["General"]
                subdomain5_<?php echo $col; ?>[8]=["Age", "Income", "Gender", "Education"]
                
                
                function updatesubdomain5_<?php echo $col; ?>(selectedsubdomain5_<?php echo $col; ?>list)
                {
                subdomain5_<?php echo $col; ?>list.options.length=0
                if (selectedsubdomain5_<?php echo $col; ?>list>0)
                  {
                    for (i=0; i< subdomain5_<?php echo $col; ?>[selectedsubdomain5_<?php echo $col; ?>list].length; i++)
                    subdomain5_<?php echo $col; ?>list.options[subdomain5_<?php echo $col; ?>list.options.length]=new Option(subdomain5_<?php echo $col; ?>[selectedsubdomain5_<?php echo $col; ?>list][i], subdomain5_<?php echo $col; ?>[selectedsubdomain5_<?php echo $col; ?>list][i])
                  }
                }
                
                </script>
                <?php 
                }
                ?>
                
               </table>
             </td>
           </tr> 
           
          
           
         </table>

**djr33** · 05-26-2010, 05:05 PM

What you're doing should be fine: you're using PHP to dynamically generate text-- in this case it's Javascript, not just HTML, but that's fine. One main reason to do this is to make editing efficient: now if you want to change all functions, you just change it in the PHP.

Ajax is something different and wouldn't really apply here. Seems like you figured it out. Good.

Thread: Using a Javascript function in PHP Loop

Thread Tools

Search Thread

Using a Javascript function in PHP Loop

The Following User Says Thank You to djr33 For This Useful Post:

Found the solution...now it works..

Bookmarks

Bookmarks

Posting Permissions