Javascript Firefox to IE woes...

[droov_van]

Ok, so I have a very simple form, which is activated by very simple javascript, and it works in Firefox but not in Internet Explorer. Are there any guns out there who can convert this into a cross-platform masterpiece?


<script type="text/javascript">
function vipRedirect(artist)
{
var initial = "http://www.hubartistservices.com/backstage/VIP_";
document.vipContent.action=initial+artist;
}
</script>

<form name="vipContent" method="post" onSubmit="javascript:vipRedirect(this.artist.value);">

<table width="270" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="100" align="right">Artist:</td>
<td width="75"><select name="artist" class="fontmain" type="text" value="">
<option>Dappled Cities</option>
<option>Old Man River</option>
<option>Shelley Harland</option>
<option>The Seabellies</option>
<option>The Curse of Company</option>
<option>Washington</option>
</select></td>
<td width="75"><input type="submit" class="fontmain" value="Get VIP content" /></td>
</tr>
</table>
</form>

[jscheuer1]

There are a number of other, better ways to go about this, but the main problem with the method you are trying is that there is no value to the select in IE unless it's options have values. So this will work in IE and FF and others with javascript enabled:


<script type="text/javascript">
function vipRedirect(artist){
var initial = "http://www.hubartistservices.com/backstage/VIP_";
document.vipContent.action=initial+artist;
return true;
}
</script>

<form name="vipContent" method="post" onsubmit="return vipRedirect(this.artist.value);">

<table width="270" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="100" align="right">Artist:</td>
<td width="75"><select name="artist" class="fontmain" type="text">
<option value="Dappled Cities">Dappled Cities</option>
<option value="Old Man River">Old Man River</option>
<option value="Shelley Harland">Shelley Harland</option>
<option value="The Seabellies">The Seabellies</option>
<option value="The Curse of Company">The Curse of Company</option>
<option value="Washington">Washington</option>
</select></td>
<td width="75"><input type="submit" class="fontmain" value="Get VIP content"></td>
</tr>
</table>
</form>

However, with PHP or another server side language (if available), you could make the form work without javascript and would only need a single 'receiving' page. That would probably be best because then your users could navigate without needing to have javascript. Failing that, there are a number of more straightforward methods to accomplish this via javascript. Or - instead of a form, why not links? If space is a premium, the links could be in a pseudo select (possibly powered only by css or with javascript that could fall back to ordinary links if javascript were unavailable) that wouldn't require javascript or a server side language.