Onchange

Expand Post »

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.

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>

Similar Threads

using Onchange() in PHP in PHP
how to call javabean from jsp page upon onChange event in JSP
How to make javascript form autochange - "Onchange"? in JavaScript / DHTML / AJAX
Trigger onChange manually in HTML and CSS

assgar

Reputation Points: 24

Solved Threads: 0

Junior Poster in Training

Offline

89 posts
since Oct 2006

Permalink

Jul 10th, 2008

Re: Onchange

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.

kceleb9

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

17 posts
since Jul 2008

Permalink

Jul 13th, 2008

Re: Onchange

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

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>

Last edited by assgar; Jul 13th, 2008 at 10:10 pm.

assgar

Reputation Points: 24

Solved Threads: 0

Junior Poster in Training

Offline

89 posts
since Oct 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Acrobat 5.0 and JavaScript

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: simple javascript syntax errors

DaniWeb Message

Cancel Changes

User Name
Password