Browser compatibility and JavaScript

youngcoder · Nov 15, 2010

Dear all, can somebody help me with browser compatibility and this code. Working fine in Opera and Firefox, but do not working in Internet Explorer and Chrome. With one form working fine in every browser, but when I put second form it stops to work in Explorer and Chrome.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<SCRIPT type="text/javascript">
function showDiv(divIndex) {  var f=document.forms[0];  var d=f.getElementsByTagName('div');
for(i=0;i<d.length;i++)d[i].style.display='none'
d[divIndex].style.display = 'block';
}
</SCRIPT>
</HEAD>
<BODY>
<form>
<select onchange="showDiv(this.value); ">
<option value="0" selected>option 1</option>
<option value="1">option 2</option>
<option value="2">option 3</option>
</select>


<div style="display:block;"><form action="001.htm" method="get" >
Your state<br> 
<select name="statecode" id="statecode">
<option value="">Choose State for option 1...</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</select> 
<input type="submit" name="search" value="Get Quotes" />
</form></div>

<div style="display:none;"><form action="002.htm" method="get" >
Your state<br> 
<select name="statecode" id="statecode">
<option value="">Choose State for option 2...</option>
<option value="AK">California</option>
<option value="AL">Colorado</option>
<option value="AR">Connecticut</option>
</select> 
<input type="submit" name="search" value="Get Quotes" />
</form></div>

<div style="display:none;"><form action="003.htm" method="get" >
Your state<br> 
<select name="statecode" id="statecode">
<option value="">Choose State for option 3...</option>
<option value="AK">Massachusetts</option>
<option value="AL">Maryland</option>
<option value="AR">Maine</option>
</select> 
<input type="submit" name="search" value="Get Quotes" />
</form></div>

</form>
</BODY></HTML>

youngcoder · Nov 15, 2010

Works in all browsers

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<SCRIPT type="text/javascript">
function showDiv(divIndex) 
{  
    var holder = document.getElementById("subforms");
    var subdivs = holder.getElementsByTagName("div");
    for( var i=0; i < subdivs.length; i++ )
    {
        subdivs[i].style.display = ( i == divIndex ) ? "block" : "none";
    }
}
</SCRIPT>
</HEAD>
<BODY>
<form>
    <select onchange="showDiv(this.value); ">
    <option value="0" selected>option 1</option>
    <option value="1">option 2</option>
    <option value="2">option 3</option>
    </select>
</form>

<div id="subforms">
    <div style="display:block;">
        <form action="001.htm" method="get" >
        ONE: Your state<br> 
        <select name="statecode" id="statecode">
        <option value="">Choose State for option 1...</option>
        <option value="AK">Alaska</option>
        <option value="AL">Alabama</option>
        <option value="AR">Arkansas</option>
        </select> 
        <input type="submit" name="search" value="Get Quotes" />
        </form>
    </div>

    <div style="display:none;">
        <form action="002.htm" method="get" >
        TWO: Your state<br> 
        <select name="statecode" id="statecode">
        <option value="">Choose State for option 2...</option>
        <option value="AK">California</option>
        <option value="AL">Colorado</option>
        <option value="AR">Connecticut</option>
        </select> 
        <input type="submit" name="search" value="Get Quotes" />
        </form>
    </div>

    <div style="display:none;">
        <form action="003.htm" method="get" >
        THREE: Your state<br> 
        <select name="statecode" id="statecode">
        <option value="">Choose State for option 3...</option>
        <option value="AK">Massachusetts</option>
        <option value="AL">Maryland</option>
        <option value="AR">Maine</option>
        </select> 
        <input type="submit" name="search" value="Get Quotes" />
        </form>
    </div>
</div>
</BODY>
</HTML>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Browser compatibility and JavaScript

youngcoder

Technical User

youngcoder

Technical User

Similar threads

Part and Inventory Search

Sponsor