validating form help

[tsp120]

I have a form with multiple drop down boxes. All start with a default value of "-", but once the form is submitted, non can have that value. When this happens, the label for the drop down box gets changed to red. I'd like to put both the label names and drop down box names in arrays, and then loop through the sets of arrays to check each one. I have many more than 3 drop down boxes in my actual code. It works fine when I copy/paste the same code over and over again but change the label and box names, but if this can be avoided, I'm sure it'll be much better coding practice.

In bold is where I'm having my problem. I know I can't enter the array variable as I have it there, but I don't know how to do it. The line below it works fine, because you pass the name in parenthesis, so inputting the array variable makes sense.

Can anyone help? Thanks!

    function validate_template() {

      valid = true;

      var dropDownNum = 3;
      var dropDowns=new Array(dropDownNum);
      var dropDownsLabel=new Array(dropDownNum);
      
      dropDowns[0]="name";
      dropDowns[1]="occupation";
      dropDowns[2]="title";

      dropDownsLabel[0]="name";
      dropDownsLabel[1]="occupation";
      dropDownsLabel[2]="title";

      for(i=0; i<dropDownNum+1; i++) {

        if (document.templateForm.[b]dropDowns[i][/b].value == "-")
        {
          var l = document.getElementById(dropDownsLabel[i]);

          l.style.color="red";
          l.style.fontWeight="bold";
          valid = false;
        }
      }

      if (valid == false)
      {
        alert("Template data incomplete");
      }

      return valid;
    }

 

[kaht]

If the value of "-" is the first option in each dropdown element then just do something like this, it's much smaller and more portable:

function validate_template() {
   var valid = true;
   var pulldowns = document.[!]getElementByTagName("select")[/!];
   for (var i = 0; i < pulldowns.length; i++) {
      pulldowns[i].style.color="red";
      pulldowns[i].style.fontWeight="bold";
      valid = false;
   }
   if (!valid) {
      alert("Template data incomplete");
   }
   return valid;
}

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]

 

[tsp120]

I made a mistake in the original message. For the Label arrays, the variables have 'Label' attached to the end. Is should read as shown below.

kaht thanks for the help, but I see two problems with your advice.

1.
For the first drop down, 'name', if it contains "-" then the label, 'nameLabel' should get changed to red.

2.
One of the selects in the code has a default value other than "-".

Do you have any other suggestings? Thanks again.

function validate_template() {

      valid = true;

      var dropDownNum = 3;
      var dropDowns=new Array(dropDownNum);
      var dropDownsLabel=new Array(dropDownNum);
      
      dropDowns[0]="name";
      dropDowns[1]="occupation";
      dropDowns[2]="title";

      dropDownsLabel[0]="nameLabel";
      dropDownsLabel[1]="occupationLabel";
      dropDownsLabel[2]="titleLabel";

      for(i=0; i<dropDownNum+1; i++) {

        if (document.templateForm.dropDowns[i].value == "-")
        {
          var l = document.getElementById(dropDownsLabel[i]);

          l.style.color="red";
          l.style.fontWeight="bold";
          valid = false;
        }
      }

      if (valid == false)
      {
        alert("Template data incomplete");
      }

      return valid;
    }

 

[kaht]

DOH! I forgot the most important part of the code:

function validate_template() {
   var valid = true;
   var pulldowns = document.getElementByTagName("select");
   for (var i = 0; i < pulldowns.length; i++) {
      [!]if (pulldowns[i].selectedIndex == 0) {[/!]
         pulldowns[i].style.color="red";
         pulldowns[i].style.fontWeight="bold";
         valid = false;
      [!]}[/!]
   }
   if (!valid) {
      alert("Template data incomplete");
   }
   return valid;
}

You could also trade in the highlighted section with your check against the value: if (pulldowns[[tt][/tt]i].value == "-") { if "-" isn't the default selection for each dropdown on the page.

On a side note - I see in your profile that you've asked almost 20 questions on the forum since you signed up w/o awarding any stars to other posters - any reason why?

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]

 

[tsp120]

Thanks again.

I understand what you're trying to do, and it makes sense to me. However, when I implemented it, I'm getting an error message saying "Object doesn't support this property or method."

It refers to this line:

var pulldowns = document.getElementByTagName("select");

And to answer your question. I'm apparently not very observant and didn't notice the awarding of stars. Plus I didn't know it was common practice. I've received a ton of great info from this site, so I will begin doing so. Thanks for pointing it out.

 

[tsp120]

Ok, I found the problem above. You had a typo, it's getElementsByTagName.

However, this does not work. I think the problem may be that it is not actually telling the code to change the Label, instead it appears to be trying to change the drop down box. Am I wrong?

 

[kaht]

I guess that should teach me to read posts thoroughly before I start posting answers....

You were correct about elements.... can't believe I screwed that up.

And you are correct about the code trying to change the dropdown, I didn't realize you had made labels for them. So, the final ammendment [small](hopefully)[/small] to the code would be:

function validate_template() {
   var valid = true;
   var pulldowns = document.getElementsByTagName("select");
   var pulldownLabel;
   for (var i = 0; i < pulldowns.length; i++) {
       if (pulldowns[i].value == "-") {
         pulldownLabel = document.getElementById(pulldowns[i].id + "Label");
         pulldownLabel.style.color = "red";
         pulldownLabel.style.fontWeight = "bold";
         valid = false;
      }
   }
   if (!valid) {
      alert("Template data incomplete");
   }
   return valid;
}

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]

 

[tsp120]

The following two lines get an error message saying 'Object required'.

         pulldownLabel.style.color = "red";
         pulldownLabel.style.fontWeight = "bold";

It's time for me to head out for the weekend, but I appreciate your help. If you can find what's wrong, I'll be sure to check back here at some point over the weekend. If not, I'll plug away when I get back.

Thanks again!