HTML form controls change to checkboxes in FF3
Can someone explain why a read-only loop is changing the controls on my form? I am using a validation script to check for incomplete entries. To duplicate my results, click an Operating System radio button and a Browser checkbox, but nothing else. Then click the Send button.
In FF3 (my primary browser) radio buttons, text areas (contact info) and buttons all turn into checkboxes. In IE7 I get an error from the browser, but my popup box does not display. Why is this?
If I remove the offending code below (and lose some of the functionality of the verification I am trying to do) I have no problem.
The offending code is:
//************************
// check for operating system
//************************
for (i=0; i<colOperatingSystems.leng
{
if (colOperatingSystems[i].ch
{
// alert("OS = " + [i] + " was checked");
intOsChecked = i;
strOs = colOperatingSystems[i].val
}
}
//alert("strOs = " + strOs);
if (intOsChecked == 0) {
strMissingInfo += "\n - Operating System";
// alert(strMissingInfo);
} // end if
The full HTML document is shown in the Code section of this question.
I consider myself a beginning-level Javascript programmer, and I thought my understanding of DOM2 was sufficient to try this form.
Thanks in advance for any advice.
Alan
In FF3 (my primary browser) radio buttons, text areas (contact info) and buttons all turn into checkboxes. In IE7 I get an error from the browser, but my popup box does not display. Why is this?
If I remove the offending code below (and lose some of the functionality of the verification I am trying to do) I have no problem.
The offending code is:
//************************
// check for operating system
//************************
for (i=0; i<colOperatingSystems.leng
{
if (colOperatingSystems[i].ch
{
// alert("OS = " + [i] + " was checked");
intOsChecked = i;
strOs = colOperatingSystems[i].val
}
}
//alert("strOs = " + strOs);
if (intOsChecked == 0) {
strMissingInfo += "\n - Operating System";
// alert(strMissingInfo);
} // end if
The full HTML document is shown in the Code section of this question.
I consider myself a beginning-level Javascript programmer, and I thought my understanding of DOM2 was sufficient to try this form.
Thanks in advance for any advice.
Alan
<html>
<head>
<title>Browser Survey</title>
<link type="text/css"
media="screen, print"
rel="stylesheet"
href="../styles/d15mb.css"/>
<script type="text/javascript">
<!-- This script and many more are available free
online at -->
<!-- The JavaScript Source!!
http://javascript.internet.com -->
function checkFields() {
//******************************
// query control values
//******************************
var strMissingInfo = "";
var intOsChecked = 0;
var strOs = "";
var intBrowserCount = 0;
var colOperatingSystems =
document.getElementsByName('grpOS'); // get ALL
elements with name="grpOS", sort out later
var colInputTags =
document.getElementsByTagName('input'); // get ALL
<input> elements, sort out later
var ieChecked =
document.getElementById('chkIE').checked;
var ieVersion = document.getElementById('lstIE').value;
var ffChecked =
document.getElementById('chkFF').checked;
var ffVersion = document.getElementById('lstFF').value;
var operaChecked =
document.getElementById('chkOpera').checked;
var operaVersion =
document.getElementById('lstOpera').value;
var nnChecked =
document.getElementById('chkNN').checked;
var nnVersion = document.getElementById('txtNN').value;
var safariChecked =
document.getElementById('chkSafari').checked;
var safariVersion =
document.getElementById('txtSafari').value;
var brOtherChecked =
document.getElementById('chkOther').checked;
var brOther =
document.getElementById('txtOther').value;
var strEmail =
document.getElementById('txtEmail').value;
var intEmailSeparator = 0; // check for @ (e.g.
a@yahoo.com)
var intEmailDomain = 0; // check for . (e.g.
yahoo.com)
//******************************
// check for operating system
//******************************
for (i=0; i<colOperatingSystems.length; i++)
{
if (colOperatingSystems[i].checked == true)
{
// alert("OS = " + [i] + " was checked");
intOsChecked = i;
strOs = colOperatingSystems[i].value;
}
}
//alert("strOs = " + strOs);
if (intOsChecked == 0) {
strMissingInfo += "\n - Operating System";
// alert(strMissingInfo);
} // end if
//******************************
// check for selected browser(s)
//******************************
for (i=0; i<colInputTags.length; i++)
{
if (colInputTags[i].type = "checkbox")
{
if (colInputTags[i].checked == true)
{
// alert("browser = " + [i] + "(" +
colInputTags[i].value + ") was checked");
intBrowserCount ++;
} // end if checked
} // end if checkbox
} // end for loop
if (intBrowserCount == 0) {
strMissingInfo += "\n - Internet Browser";
} // end if
//******************************
// check for browser version
//******************************
if (ieChecked) {
if (ieVersion == 99) {
strMissingInfo += "\n - Explorer Version";
} // end if ieVersion
} // end if ieChecked
if (ffChecked) {
if (ffVersion == 99) {
strMissingInfo += "\n - Firefox Version";
} // end if ffVersion
} // end if ffChecked
if (operaChecked) {
if (operaVersion == 99) {
strMissingInfo += "\n - Opera Version";
} // end if operaVersion
} // end if operaChecked
if (nnChecked) {
if (nnVersion == "- enter version -") {
strMissingInfo += "\n - Navigator Version";
} // end if nnVersion
} // end if nnChecked
if (safariChecked) {
if (safariVersion == "- enter version -") {
strMissingInfo += "\n - Safari Version";
} // end if safariVersion
} // end if safariChecked
if (brOtherChecked) {
if (brOther == "- enter name -") {
strMissingInfo += "\n - Other Browser Name";
} // end if brOther blank
} // end if brOtherChecked
//******************************
// check for email address
//******************************
if (strEmail == "") {
strMissingInfo += "\n - E-mail Address";
} // end if strEmail blank
intEmailSeparator = strEmail.indexOf('@');
intEmailDomain = strEmail.indexOf('.');
//alert("@=" + intEmailSeparator + "\n" + "." +
intEmailDomain);
if (intEmailSeparator < 1) {
strMissingInfo += "\n - valid E-mail Address
(need @)";
} // end if strEmail missing @
if (intEmailDomain < 1) {
strMissingInfo += "\n - valid E-mail Address
(need .)";
} // end if strEmail missing .
if (intEmailSeparator > intEmailDomain) {
strMissingInfo += "\n - valid E-mail Address
(format)";
} // end if @ comes after .
//******************************
// display any error messages
//******************************
if (strMissingInfo != "")
{
strMissingInfo ="_____________________________\n" +
"You failed to correctly fill in your:\n" +
strMissingInfo +
"\n_____________________________" +
"\nPlease re-enter and submit again!";
alert(strMissingInfo);
return false;
}
else
{
return true;
} // end if strMissingInfo blank
} // end of function checkFields
</script>
<script type="text/javascript">
function showName(control)
{
alert("id=" + control.id);
} // end function showName
</script>
</head>
<body>
<p>
<span class="boldlarge">Internet Browser
Survey</span>
</p>
<form id="surveym"
method="post"
action="http://us.2.p10.geocities.yahoo.com/forms?login
=mmsbandbooster">
<fieldset>
<legend>Operating System</legend>
<p>
<span class="bold">Which operating system do you
use?</span><br/>
<label><input type="radio" id="radWindows"
name="grpOS" value="mswindows"/>Windows</label><br/>
<label><input type="radio" id="radMac"
name="grpOS" value="mac"/>Mac</label><br/>
<label><input type="radio" id="radLinux"
name="grpOS" value="linux"/>Linux</label>
<!--
<radiogroup id="grpOS">
<radio id="mswindows" label="Windows"/><br/>
<radio id="mac" label="Mac"/><br/>
<radio id="linux" label="Linux"/>
</radiogroup>
-->
</p>
</fieldset>
<fieldset>
<legend>Browser</legend>
<p>
<span class="bold">Which version Internet
browser(s) do you use?</span><br/>
<label><input type="checkbox" id="chkIE"
value="IE"/>Internet Explorer.....</label>
<datalist id="IE_version">
<select id="lstIE" size="1">
<option value="99">-- select from list
--</option>
<option value="60">6.0</option>
<option value="70">7.0</option>
<option value="80">8.0</option>
<option value="legacy">previous</option>
</select><br/>
</datalist>
<label><input type="checkbox" id="chkFF"
value="FF"/>Firefox..................</label>
<datalist id="FF_version">
<select id="lstFF" size="1">
<option value="99">-- select from list
--</option>
<option value="20">2.0</option>
<option value="30">3.0</option>
<option value="31">3.1</option>
<option value="legacy">previous</option>
</select><br/>
</datalist>
<label><input type="checkbox" id="chkOpera"
value="Opera"/>Opera...................</label>
<datalist id="Opera_version">
<select id="lstOpera" size="1">
<option value="99">-- select from list
--</option>
<option value="925">9.25</option>
<option value="95">9.5</option>
<option value="96">9.6</option>
<option value="legacy">previous</option>
</select><br/>
</datalist>
<label><input type="checkbox" id="chkNN"
value="NN"/>Netscape Navigator....</label>
<input type="text" id="txtNN" value="- enter
version -" size="15"/><br/>
<label><input type="checkbox" id="chkSafari"
value="Safari"/>Safari......................</label>
<input type="text" id="txtSafari" value="- enter
version -" size="15"/><br/>
<label><input type="checkbox" id="chkOther"
value="other"/>Other......................</label>
<input type="text" id="txtOther" value="- enter
name -" size="15"/><br/>
</p>
</fieldset>
<fieldset>
<legend>Contact information</legend>
<p>
<span class="bold">What is your e-mail address?
(required)</span><br/>
<input type="text" id="txtEmail"/>
</p>
<p>
<span class="bold">What is your name?
(optional)</span><br/>
<input type="text" id="txtName" size="27"/>
</p>
</fieldset>
<!-- action buttons -->
<p>
<input type="submit" value="Send" onclick="return
checkFields();"/>
<input type="reset" value="Clear the form"/>
<!-- Option 1 -->
<input type="hidden" name="subject" value="D15MB
Browser Survey"/>
<!-- Option 2 -->
<!-- IMPORTANT: NO SPACES BETWEEN VALUE values -->
<input type="hidden" name="required_fields"
value="txtEmail"/>
<!-- Option 3 -->
<input type="hidden" name="next_url"
value="http://d15musicboosters.org/forms/thankyou.htm"/
>
</p>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER