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 1 of 1
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    174
    Thanks
    13
    Thanked 1 Time in 1 Post

    On change method working in FF but not IE

    My script works fine in firefox 3 but ie6 doesn't complete the 'change' method on the select option.
    html:
    Code:
    <body>
    <div id="container">
    <p class="main">Mental Health Association of Northwestern  PA</p>
    <h1 style="line-height:1em;"><span class="script">Volunteers</span> make a difference</h1>
    <p class="newrecords">Use this page to input new records.</p>
    <div id="volsel">
    <form name="volselect" id="volselect" method="post" action="volgetname.php">
    <select name="vol" id="vol" size="1" style="width:20em">
    <option>FullName</option>
    </select>
    </form>
    </div><!--end div volsel -->
    <div id="volhours">
    </div><!-- end div volhours -->
    <div id="newpost">
    <p class="newhours">Use this form to input new hours</p>
    <form name="volnewhours" id="volnewhours" method="post" action="volpostnewhours.php">
    <table width="650" border="1" summary="newvolunteer hours post" cellspacing="1" cellpadding="1">
    <col width="100">
    <col width="75">
    <col width="150">
    <col width="50">
    <col width="150">
    <tr><th>Date</th><th>Hours</th><th>Area</th><th>Peers</th><th>Memo</th></tr>
    <tr><td><input type="text" id="newdate" name="newdate" maxlength="15"></td>
    <td><input type="text" id="hoursin" name="hoursin" size="4" maxlength="9"></td>
    <!--<td><input type="text" id="area" name="area" size="20" maxlength="75"></td>-->
    <td><select id="area" size="1"><option>Area of Interest</option></select></td>
    <td><input type="text" id="peers" name="peers" size="4" maxlength="3"></td>
    <td><input type="text" id="memo" name="memo" size="20" maxlength="100" value="~"></td>
    <tr><td colspan="5" style="text-align:center"><input type="submit" id="postbutton"  value="Submit This Data"></td></tr>
    </table>
    </form>
    <form name="volnewhours2" id="volnewhours2" method="post" action="volpostnewhours2.php">
    <table width="650" border="1" summary="newvolunteer hours post" cellspacing="1" cellpadding="1">
    <col width="100">
    <col width="75">
    <col width="150">
    <col width="50">
    <col width="150">
    <tr><th>Date</th><th>Hours</th><th>Area</th><th>Peers</th><th>Memo</th></tr>
    <tr><td><input type="text" id="newdate2" name="newdate2" maxlength="15"></td>
    <td><input type="text" id="hoursin2" name="hoursin2" size="4" maxlength="9"></td>
    <td><input type="text" id="area2" name="area2" size="20" maxlength="75"></td>
    <td><input type="text" id="peers2" name="peers2" size="4" maxlength="3"></td>
    <td><input type="text" id="memo2" name="memo2" size="20" maxlength="100" value="~"></td>
    <tr><td colspan="5" style="text-align:center"><input type="submit" id="postbutton2"  value="Submit This Data"></td></tr>
    </table>
    </form>
    <button id="togglepostform">I need a NEW Area of Interest</button>
    <button id="returntolist">Return to form with list</button>
    </div><!-- end div newpost -->
    <div id="newname">
    <p><a href="voladdname.php" class="button">Add New Volunteer</a></p>
    </div><!-- end div newname -->
    </div><!-- end of div container-->
    <div class="panel">
    <p><a href="dbapanel.php">Return to Directory</a></p>
    </div><!-- end div panel -->
    </body>
    </html>
    script:
    Code:
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    var volnum;
    $(document).ready(function(){
    	$.post("volgetname.php", function(data){    //get names to populate select list
    	$('select#vol').html(data);	
    		});											  //close get names
    	$('select#vol').change(function(){  //this is the change function not working                   //add onchange capabilities
    		displayrecord();							   //close onchange
    		$('.newrecords').html('. . . pending . . .');
    				});
     	function displayrecord(){					  //describe function displayrecord
    var volnum = document.getElementById("vol").value;    //get selected name as value
    getarea();
    $.post("volgethours.php",{"volnum":volnum},function(data){     //post to get data from table
    document.getElementById("volnewhours").reset();		//clear post form data
    document.getElementById("volnewhours2").reset();	    //clear post form data
    $('#volhours') . html(data);						  //retrieved data into html
    $('#volhours') . show(1000);						//show division
    $('.newhours').  show(1000);					     //show paragraph
    $('#volnewhours').show(1000);					 //show form 
    $('#togglepostform').show(1000);		           //show toggle button
    });													   //end post get hours
    }													   //end function displayrecord
    $('#postbutton').click(function(){					//add onclick function to postbutton
    $(this).fadeTo("fast",0.33).html(". . . pending . . .");
    var volnum = $('select#vol').attr('value');		  //create data string for ajax
    var date = $('#newdate').attr('value');
    var hours = $('#hoursin').attr('value');
    var area = $('#area').attr('value');
    var peers = $('#peers').attr('value');
    var memo = $('#memo').attr('value');
    dataString = "volnum=" + volnum + "&date=" + date + "&hours=" + hours + "&area=" + area + "&peers=" + peers + "&memo=" + memo;		//end create data string
    
    function setbutton(){								 //describe function setbutton
    	$('#postbutton').fadeTo("fast",1)				
    					    .html("Submit This Data");
    	}													//close function set button
    $.ajax({												 //begin ajax function
    			type:"POST",
    			url:"volpostnewhours.php",
    			data: dataString,
    	          success:function(){						 //begin on success	
    			displayrecord();
    			document.getElementById("volnewhours2").reset(); //clear other input form
    			setbutton();
    			}											//end on success
    		});											    //end ajax call
    	return false;
    });		//end postbutton click
    $('#togglepostform').click(function(){				//add onclick function to toggle button
    $('#volnewhours').hide(400);
    $('#volnewhours2').show(400);
    $('#togglepostform').hide(400);
    $('#returntolist').show(400);
    });
    $('#returntolist').click(function(){
    $('#volnewhours,#togglepostform').show(400);
    $('#volnewhours2,#returntolist').hide(400);
    });
    $('#postbutton2').click(function(){					//add onclick function to postbutton2
    $(this).fadeTo("fast",0.33).html(". . . pending . . .");////used before it was defined
    var volnum = $('select#vol').attr('value');		  //create data string for ajax
    var date = $('#newdate2').attr('value');
    var hours = $('#hoursin2').attr('value');
    var area = $('#area2').attr('value');
    var peers = $('#peers2').attr('value');
    var memo = $('#memo2').attr('value');
    dataString = "volnum=" + volnum + "&date=" + date + "&hours=" + hours + "&area=" + area + "&peers=" + peers + "&memo=" + memo;		//end create data string
    $.ajax({												 //begin ajax function
    			type:"POST",
    			url:"volpostnewhours2.php",
    			data: dataString,
    	          success:function(){						 //begin on success	
    			var volnum = document.getElementById("vol").value;    //get selected name as value
    			document.getElementById("volnewhours");		//clear other input form
    			getarea();
    			$.post("volgethours.php",{"volnum":volnum},function(data){     //post to get data from table
    			$('#volhours') . html(data);						  //retrieved data into html
    			$('#volhours') . show(1000);						//show division
    			$('.newhours').  show(1000);					     //show paragraph
    			});													   //end post get hours
    			$('#postbutton2').fadeTo("400",1).html("Submit This Data");
    			}													  //end on success
    			});
    											    //end ajax call
    return false;
    });												//end postbutton click
    function getarea(){
    $.post("volgetarea.php", function(data){    //get areas to populate select list
    	$('select#area').html(data);	
    		});	
    }
    });		//end document.ready
    
    
    </script>
    Thanks,

    Andy
    Last edited by 1andyw; 05-28-2009 at 08:20 PM. Reason: RESOLVED


 

Posting Permissions

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