AJAX

Onchange

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2006

Posts: 82

Reputation: assgar is an unknown quantity at this point

Solved Threads: 0

assgar

Offline

Junior Poster in Training

Onchange

Jul 10th, 2008

Hi
I am new to javascript.
I have two drop downs used to reload the page displaying selected information.

How do I get the OnChange function to pass year and user form the drop down.
I also need to pass data in the array $month.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
<body>
<script language="JavaScript" type="text/JavaScript">
<!--
 
function OnChange(dropdown)
{
  //reload page after drop down selection
  window.location.href="http://localhost/month_view.php?u_user_id=" +
  dropdown.options[dropdown.selectedIndex].value    "&year="+   "&month="+ ;
}
--->
 
 
 <table>
   <tr><td>
     <!--year drop down-->
     <select name ="year" onChange ="javascript:OnChange(this)"
      <option value="">Select</option>
      <option value="2007">2007</option>
      <option value="2008">2008</option>
     </select>
 
 
 
     <select name = "user_id" onChange ="javascript:OnChange(this)"
      <option value="">Select</option>
      <option value="1">Frank</option>
      <option value="2">Mark</option>
     </select>
 
</td>    
</tr>
<tr>
<td>
 <?php
 	//display information based on selected year, month and user
 	display_info($year, $month, $user);
 ?>
 
</td>
</tr>
</table>
</body>
</head>
</html>
<html>
<head>
<body>
<script language="JavaScript" type="text/JavaScript">
<!--

function OnChange(dropdown)
{
  //reload page after drop down selection
  window.location.href="http://localhost/month_view.php?u_user_id=" +
  dropdown.options[dropdown.selectedIndex].value    "&year="+   "&month="+ ;
}
--->


 <table>
   <tr><td>
     <!--year drop down-->
     <select name ="year" onChange ="javascript<b></b>:OnChange(this)"
      <option value="">Select</option>
      <option value="2007">2007</option>
      <option value="2008">2008</option>
     </select>

	
      
     <select name = "user_id" onChange ="javascript<b></b>:OnChange(this)"
      <option value="">Select</option>
      <option value="1">Frank</option>
      <option value="2">Mark</option>
     </select>
     
</td>    
</tr>
<tr>
<td>
 <?php
 	//display information based on selected year, month and user
 	display_info($year, $month, $user);
 ?>
	
</td>
</tr>
</table>
</body>
</head>
</html>

•

Join Date: Jul 2008

Posts: 17

Reputation: kceleb9 is an unknown quantity at this point

Solved Threads: 0

kceleb9

Offline

Newbie Poster

Re: Onchange

Jul 10th, 2008

First - it looks like you are trying to re-load the page to early. It is the first line in your function - so you will lose whatever was selected in the drop down.

Clean way is just make a var:

var year;

and assign it to the value of the dropdown at the **beginning** of your function

year = options[dropdown.selectedIndex].value;

if you need to use both year AND user when you refresh the page - then instead of passing (this) from the onchange hander - just give an id to each SELECT element and then look up each one with document.getElementById() in your function.

Then you can get the year and the user before you refresh the page again.

•

Join Date: Oct 2006

Posts: 82

Reputation: assgar is an unknown quantity at this point

Solved Threads: 0

assgar

Offline

Junior Poster in Training

Re: Onchange

Jul 13th, 2008

Hi

Thanks for the response and suggestion.
I could not a single function to work.
I could get 2 seperate functions working and it does the job.

I am curious why your suggestion won;t work as one function but will wor as two?

solution

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
<script language="javascript" type="text/javascript">
 
function YearChange()
{
   var year = document.getElementById('year').value;
   window.location.href="http://localhost/month_view.php?year=" + year;
}
 
function ProChange()
{
   var providerId = document.getElementById('provider_id').value;
   window.location.href="http://localhost/month_view.php?u_org_pro_id=" + providerId;
}
 
</script>
</head>
<body>
 <table>
   <tr><td>
 
   <select name= "year" onchange="javascript:YearChange();">
     <?
        //dynamic year dropdown 14 years (4 back, current and 9 forward)
	year_only($year);
     ?>
    </select>
 
 
    <select name= "user_id" onchange="javascript:ProChange();">
       <?
 	  //display information based on selected year, month and user
 	  display_info($year, $month, $user);     
       ?>
    </select>
 
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<script language="javascript" type="text/javascript">

function YearChange()
{
   var year = document.getElementById('year').value;
   window.location.href="http://localhost/month_view.php?year=" + year;
}

function ProChange()
{
   var providerId = document.getElementById('provider_id').value;
   window.location.href="http://localhost/month_view.php?u_org_pro_id=" + providerId;
}

</script>
</head>
<body>
 <table>
   <tr><td>

   <select name= "year" onchange="javascript<b></b>:YearChange();">
     <?
        //dynamic year dropdown 14 years (4 back, current and 9 forward)
	year_only($year);
     ?>
    </select>
 
      
    <select name= "user_id" onchange="javascript<b></b>:ProChange();">
       <?
 	  //display information based on selected year, month and user
 	  display_info($year, $month, $user);     
       ?>
    </select>

</td>
</tr>
</table>
</body>
</html>