|
| |
|
|
BobbyDouglas
Posts: 5479
Joined: 5/15/2003
From: Arizona
Status: offline
 |
IE7 and some JS onchange - 3/6/2007 14:36:51
When the option for the dropdown box is changed, the goChange() function is ran. No matter what value is selected, IE7 never pops up with a JS Alert window. With FF, the alert window pops up, and the table row displays correctly. I have a feeling IE7 doesn't like table-row for the style too.
Either way, the JS isn't running, so that's the first problem I'm trying to solve. It must have something to do with grabbing the value of the select. I've also tried this.options[this.selectedIndex].value
<script language="javascript">
function goChange(){
if(document.forms[0].BLoanType.value=='Select Type'){
document.getElementById('Downpayment').style.display='none';
document.getElementById('OccupancyType').style.display='none';
document.getElementById('LoanAmt').style.display='none';
document.getElementById('EstValue').style.display='none';
alert('Select Type');}
if(document.forms[0].BLoanType.value=='Refinance'){
document.getElementById('LoanAmt').style.display='table-row';
document.getElementById('EstValue').style.display='table-row';
document.getElementById('Downpayment').style.display='none';
document.getElementById('OccupancyType').style.display='none';
alert('Refinance');}
if(document.forms[0].BLoanType.value=='Purchase'){
document.getElementById('Downpayment').style.display='table-row';
document.getElementById('OccupancyType').style.display='table-row';
document.getElementById('LoanAmt').style.display='none';
document.getElementById('EstValue').style.display='none';
alert('Purchase');}
}
</script>
My table looks like:
<table>
<tr>
<td class="leftCol">Loan Type:</td>
<td><select size="1" name="BLoanType" id="BLoanType" onchange="goChange();">
<option selected>Select Type</option>
<option>Refinance</option>
<option>Purchase</option>
</select></td>
<td><select size="1" name="CBLoanType">
<option selected>Select Type</option>
<option>Refinance</option>
<option>Purchase</option>
</select></td>
</tr>
<tr style="display:none;" id="Downpayment">
<td class="leftCol">Downpayment</td>
<td>
<select size="1" name="BDownPayment">
<option>5%</option>
<option>10%</option>
<option>20%</option>
</select></td>
<td><select size="1" name="CBDownPayment">
<option>5%</option>
<option>10%</option>
<option>20%</option>
</select></td>
</tr>
<tr style="display:none;" id="OccupancyType">
<td class="leftCol">Occupancy Type</td>
<td><select size="1" name="BOccupancyType">
<option>Primary Resident</option>
<option>Second Home</option>
<option>Investor</option>
</select></td>
<td><select size="1" name="CBOccupancyType">
<option>Primary Resident</option>
<option>Second Home</option>
<option>Investor</option>
</select></td>
</tr>
<tr style="display:none;" id="LoanAmt">
<td class="leftCol">Loan Amount:</td>
<td><input type="text" name="BLoanAmt" size="20"></td>
<td><input type="text" name="CBLoanAmt" size="20"></td>
</tr>
<tr style="display:none;" id="EstValue">
<td class="leftCol">Estimated Value of Home:</td>
<td><input type="text" name="BEstValue" size="20"></td>
<td><input type="text" name="CBEstValue" size="20"></td>
</tr>
</table>
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
|
|
|
|
BobbyDouglas
Posts: 5479
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: IE7 and some JS onchange - 3/6/2007 15:22:27
I was able to get it working in IE7/FF by changing the JS to:
<script language="javascript">
function goChange(){
if(document.forms[0].BLoanType.selectedIndex == 0){
document.getElementById('Downpayment').className = 'hidden';
document.getElementById('OccupancyType').className = 'hidden';
document.getElementById('LoanAmt').className = 'hidden';
document.getElementById('EstValue').className = 'hidden';
}
if(document.forms[0].BLoanType.selectedIndex == 1){
document.getElementById('LoanAmt').className = 'nothidden';
document.getElementById('EstValue').className = 'nothidden';
document.getElementById('Downpayment').className = 'hidden';
document.getElementById('OccupancyType').className = 'hidden';
}
if(document.forms[0].BLoanType.selectedIndex == 2){
document.getElementById('Downpayment').className = 'nothidden';
document.getElementById('OccupancyType').className = 'nothidden';
document.getElementById('LoanAmt').className = 'hidden';
document.getElementById('EstValue').className = 'hidden';
}
}
</script>
If anyone can point out the reason why the JS in the first post didn't work, that would be great.
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
BeTheBall
Posts: 6385
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
RE: IE7 and some JS onchange - 3/6/2007 15:24:36
If BLoanType is a dropdown, then try this (assuming the options in the dropdown are in this order: Select Type, Refinance, Purchase):
<script language="javascript">
function goChange(){
if(document.forms[0].BLoanType.selectedIndex==0){
document.getElementById('Downpayment').style.display='none';
document.getElementById('OccupancyType').style.display='none';
document.getElementById('LoanAmt').style.display='none';
document.getElementById('EstValue').style.display='none';
alert('Select Type');}
if(document.forms[0].BLoanType.selectedIndex==1){
document.getElementById('LoanAmt').style.display='table-row';
document.getElementById('EstValue').style.display='table-row';
document.getElementById('Downpayment').style.display='none';
document.getElementById('OccupancyType').style.display='none';
alert('Refinance');}
if(document.forms[0].BLoanType.selectedIndex==2){
document.getElementById('Downpayment').style.display='table-row';
document.getElementById('OccupancyType').style.display='table-row';
document.getElementById('LoanAmt').style.display='none';
document.getElementById('EstValue').style.display='none';
alert('Purchase');}
}
</script>
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
|
|
BeTheBall
Posts: 6385
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
RE: IE7 and some JS onchange - 3/6/2007 15:28:22
I am surprised the js in the first post works in any browser. In js, this:
if(document.forms[0].BLoanType.value=='Select Type'){
would never evaluate to true no matter what value you put after the ==.
You would have to use:
if(document.forms[0].BLoanType.options[document.forms[0].BLoanType.selectedIndex].value=='Select Type'){
Dropdowns do not have a value, options do. Therefore you have to look at the value of the selected option and evaluate it.
Does that make sense?
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
|
|
BobbyDouglas
Posts: 5479
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: IE7 and some JS onchange - 3/6/2007 17:27:51
Thanks Duane!
I ended up just changing the class, as opposed to the style, here's what I ended up with:
<script language="javascript">
var Descriptions1 = ('N/A','Downpayment', 'Loan Amount');
var Descriptions2 = ('N/A','Occupancy Type', 'Estimated Value of Home');
function goChange(){
if(document.forms[0].BLoanType.selectedIndex == 0){
document.getElementById('DownPayment').className = 'hidden';
document.getElementById('OccupancyType').className = 'hidden';
document.getElementById('LoanAmt').className = 'hidden';
document.getElementById('EstValue').className = 'hidden';
}
if(document.forms[0].BLoanType.selectedIndex == 1){
document.getElementById('LoanAmt').className = 'nothidden';
document.getElementById('EstValue').className = 'nothidden';
document.getElementById('DownPayment').className = 'hidden';
document.getElementById('OccupancyType').className = 'hidden';
}
if(document.forms[0].BLoanType.selectedIndex == 2){
document.getElementById('DownPayment').className = 'nothidden';
document.getElementById('OccupancyType').className = 'nothidden';
document.getElementById('LoanAmt').className = 'hidden';
document.getElementById('EstValue').className = 'hidden';
}
//document.getElementById('Descriptions1').className = 'leftCol nothidden';
//document.getElementById('Descriptions2').className = 'leftCol nothidden';
}
</script>
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
