We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

HTML form controls change to checkboxes in FF3

Alan Varga
Alan Varga asked
on
Medium Priority
372 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

Comment
Watch Question

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")

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Alan VargaAccess Developer

Author

Commented:
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!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.