PDA

View Full Version : Mozilla Compatibility

ARL002
12-03-2002, 03:21 AM
I was trying to adapt this mutli-dialog form for a school project, however it seems like it is not compatible with the current release of mozilla, 1.01. In the description it seems that the author used "getElementById('myForm').elements" to get all the values of one form into another. This should be NN6 compatible. How do I fix this so that it is mozilla/netscape compatible? Thanks!

Link to code and code description (http://tech.irt.org/articles/js211/)


<head>
<script language="JavaScript"><!--
function update(n) {
var what;
if (document.getElementById) what = document.getElementById('myForm').elements;
else if (document.all) what = document.all['myTab'].myForm.elements;
else if (document.layers) what = document.layers['myTab'].document.myForm.elements;

for (var i=0, j=what.length; i<j; i++) {
var myType = (what[i].type).toLowerCase(), myName = what[i].name;
if (myType == 'radio' && what[i].checked)
document.hiddenForm.elements[myName].value = what[i].value;
if (myType == 'checkbox')
document.hiddenForm.elements[myName].value = ((what[i].checked) ? what[i].value : '');
if (myType == 'password' || myType == 'text' || myType == 'textarea')
document.hiddenForm.elements[myName].value = what[i].value;
if (myType == 'select-one')
document.hiddenForm.elements[myName].value = what[i].options[what[i].selectedIndex].text;
}
}

var theCountries = ['United States','United Kingdom','Canada'];
var theAges = ['0 - 17','16 - 21','22 - 30','30 - 45','45 - 60','60+'];
var theSkills = ['Java','JavaScript','VBScript','ASP','HTML'];

function show(n) {
var output = '<form name="myForm">';
switch(n) {
case 1:
// This demonstrates text and password fields
output += '\n<p>Name:<br>';
output += '\n<input type="text" name="myName" value="' + document.hiddenForm.myName.value + '" size="30">';
output += '\n<p>Email Address:<br>';
output += '\n<input type="text" name="myEmail" value="' + document.hiddenForm.myEmail.value + '" size="30">';
output += '\n<p>Userid:<br>';
output += '\n<input type="text" name="myUserid" value="' + document.hiddenForm.myUserid.value + '" size="30">';
output += '\n<p>Password:<br>';
output += '\n<input type="password" name="myPassword" value="' + document.hiddenForm.myPassword.value + '" size="30">';
break;
case 2:
// This demonstrates more text fields and a select form field
output += '\n<p>Address1:<br>';
output += '\n<input type="text" name="myAddress1" value="' + document.hiddenForm.myAddress1.value + '" size="30">';
output += '\n<p>Address2:<br>';
output += '\n<input type="text" name="myAddress2" value="' + document.hiddenForm.myAddress2.value + '" size="30">';
output += '\n<p>Address3:<br>';
output += '\n<input type="text" name="myAddress3" value="' + document.hiddenForm.myAddress3.value + '" size="30">';
output += '\n<p>Country:';
output += '\n<br><select name="myCountry">';
for (var i=0; i<theCountries.length; i++) {
if (document.hiddenForm.myCountry.value == theCountries[i])
output += '\n<option selected>' + theCountries[i];
else
output += '\n<option>' + theCountries[i];
}
output += '\n<\/select>';
break;
case 3:
// This demonstrates radio form fields
output += '\n<p>Age:';
for (var i=0; i<theAges.length; i++) {
if (document.hiddenForm.myAge.value == theAges[i])
output += '\n<br><input checked type="radio" name="myAge" value="' + theAges[i] + '"> ' + theAges[i];
else
output += '\n<br><input type="radio" name="myAge" value="' + theAges[i] + '"> ' + theAges[i];
}
break;
case 4:
// This demonstrates check box form fields
output += '\n<p>Skills:'
for (var i=0; i<theSkills.length; i++) {
if (document.hiddenForm.elements[theSkills[i]].value == 'on')
output += '\n<br><input checked type="checkbox" name="' + theSkills[i] + '"> - ' + theSkills[i];
else
output += '\n<br><input type="checkbox" name="' + theSkills[i] + '"> - ' + theSkills[i];
}
break;
}
output += '\n<\/form>';

if (document.getElementById) {
if (window.HTMLElement) {
spanNode = document.getElementById('myTab');
while (spanNode.hasChildNodes()) spanNode.removeChild(spanNode.lastChild);
var range = document.createRange();
range.selectNodeContents(spanNode);
spanNode.appendChild(range.createContextualFragment(output));
}
else {
document.all('myTab').innerHTML = output;
}
}
else if (document.all)
document.all('myTab').innerHTML = output;
else if (document.layers) {
document.layers['myTab'].document.open();
document.layers['myTab'].document.writeln(output);
document.layers['myTab'].document.close();
}
}
//--></script>
</head>

<body onLoad="if (document.getElementById || document.all || document.layers) show(tab=1)">

<form name="hiddenForm" method="get">
<input type="hidden" value="" name="myName">
<input type="hidden" value="" name="myEmail">
<input type="hidden" value="" name="myUserid">
<input type="hidden" value="" name="myPassword">

<input type="hidden" value="" name="myAddress1">
<input type="hidden" value="" name="myAddress2">
<input type="hidden" value="" name="myAddress3">
<input type="hidden" value="0" name="myCountry">

<input type="hidden" value="" name="myAge">

<input type="hidden" value="" name="Java">
<input type="hidden" value="" name="JavaScript">
<input type="hidden" value="" name="VBScript">
<input type="hidden" value="" name="ASP">
<input type="hidden" value="" name="HTML">

<input type="button" value="Name" onClick="update(tab);show(tab=1)">
<input type="button" value="Address" onClick="update(tab);show(tab=2)">
<input type="button" value="Age" onClick="update(tab);show(tab=3)">
<input type="button" value="Skills" onClick="update(tab);show(tab=4)">
<input type="submit" value="Submit">
</form>

<span id="myTab" style="position:absolute"></span>

</body>
</html>
ARL002
12-03-2002, 03:34 AM
btw I forgot to add that the Mozilla javascript debugger gives an error:

document.getElementById("myForm") has no properties
glenngv
12-03-2002, 03:44 AM
change this:
var what;
if (document.getElementById) what = document.getElementById('myForm').elements;
else if (document.all) what = document.all['myTab'].myForm.elements;
else if (document.layers) what = document.layers['myTab'].document.myForm.elements;

to this:
var what = document.forms["myForm"].elements;
or
var what = document.myForm.elements;

that should work in all browsers
ARL002
12-03-2002, 09:39 AM
Originally posted by glenngv
to this:
var what = document.forms["myForm"].elements;
or
var what = document.myForm.elements;

that should work in all browsers

Great thanks! It works perfectly :D
glenngv
12-03-2002, 10:08 AM
Originally posted by glenngv
change this:
var what;
if (document.getElementById) what = document.getElementById('myForm').elements;
else if (document.all) what = document.all['myTab'].myForm.elements;
else if (document.layers) what = document.layers['myTab'].document.myForm.elements;

to this:
var what = document.forms["myForm"].elements;
or
var what = document.myForm.elements;

that should work in all browsers

just would like to correct my statement "that should work in all browsers", that means IE/NS6+/Gecko excluding NS4

so the code should be:
if (document.layers) what = document.layers['myTab'].document.myForm.elements;
else what = document.forms["myForm"].elements;