?
Solved

HTML form controls change to checkboxes in FF3

Posted on 2009-02-12
2
Medium Priority
?
356 Views
Last Modified: 2012-05-06
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.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


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>

Open in new window

0
Comment
Question by:Alan Varga
2 Comments
 
LVL 2

Accepted Solution

by:
pandalandaland earned 200 total points
ID: 23623954
On line 107

if (colInputTags[i].type = "checkbox")

You are assigning the type to a checkbox. You need the comparison ==

if (colInputTags[i].type == "checkbox")
0
 
LVL 2

Author Closing Comment

by:Alan Varga
ID: 31546151
You are AWESOME!  Thanks for the quick response.  Although the solution is simple, my experience is not deep enough that I would have figured it out.  Thanks for your time!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Recently I have been answering a lot of questions like this in IT forums that I frequent. The question posed is usually something along the lines of "We have software X installed and need to uninstall it for reason Y" or some other variant of the sa…
Measuring Server's processing rate with a simple powershell command. The differences in processing rate also was recorded in different use-cases, when a server in free and busy states.
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month16 days, 18 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question