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
Before you post, read our: 
