Previous Page
Next Page

Setting One Field with Another

With your forms, you'll often find that if the user makes one choice, that choice dictates the value of other fields on the form. For example, let's say that the sunroof option is only available on a two-door model. You could deal with this in two ways. First, you could check the entry and put up an alert dialog if the user makes the wrong choice. But it's a slicker design to simply make the entry for the user. So if they pick the sunroof, the script automatically clicks the two-door button, as in Figure 7.10. Script 7.13 shows you how.

Figure 7.10. When the user checks the sunroof option, the script automatically sets the two-door radio button.


Script 7.13. A sophisticated way to handle user choices lets you control and set field entries based on other choices made by the user.

window.onload = initForms;

function initForms() {
     for (var i=0; i< document.forms.length; i++) {
        document.forms[i].onsubmit = function() {return validForm();}
     }
     document.getElementById("sunroof"). onclick = doorSet;
}

function validForm() {
     var allGood = true;
     var allTags = document.getElementsByTagName ("*");

     for (var i=0; i<allTags.length; i++) {
        if (!validTag(allTags[i])) {
           allGood = false;
        }
     }
     return allGood;

     function validTag(thisTag) {
        var outClass = "";
        var allClasses = thisTag.className.split (" ");

        for (var j=0; j<allClasses.length; j++) {
           outClass += validBasedOnClass(allClasses[j]) + " ";
        }

        thisTag.className = outClass;
        if (outClass.indexOf("invalid") > -1) {
           invalidLabel(thisTag.parentNode);
           thisTag.focus();
           if (thisTag.nodeName == "INPUT") {
              thisTag.select();
           }
           return false;
        }
        return true;

        function validBasedOnClass(thisClass) {
           var classBack = "";

           switch(thisClass) {
              case "":
              case "invalid":
                 break;
              case "reqd":
                 if (allGood && thisTag.value == "") classBack = "invalid ";
                 classBack += thisClass;
                 break;
              case "radio":
                 if (allGood && !radioPicked(thisTag.name)) classBack = "invalid ";
                 classBack += thisClass;
                 break;
              case "isNum":
              case "isZip":
              case "email":
                 classBack += thisClass;
                 break;
              default:
                 if (allGood && !crossCheck(thisTag,thisClass)) classBack = "invalid ";
                 classBack += thisClass;
           }
           return classBack;
        }

        function crossCheck(inTag,otherFieldID) {
           if (!document.getElementById(otherFieldID)) return false;
           return (inTag.value != "" || document.getElementById(otherFieldID).value != "");
        }
        function radioPicked(radioName) {
           var radioSet = "";

           for (var k=0; k<document.forms.length; k++) {
              if (!radioSet) {
                 radioSet = document.forms[k][radioName];
              }
           }
           if (!radioSet) return false;
           for (k=0; k<radioSet.length; k++) {
              if (radioSet[k].checked) {
                 return true;
              }
           }
           return false;
        }

        function invalidLabel(parentTag) {
           if (parentTag.nodeName == "LABEL") {
              parentTag.className += " invalid";
           }
        }
      }
}

function doorSet() {
     if (this.checked) {
        document.getElementById("twoDoor").checked = true;
     }
}

To set a field value automatically:

1. 
document.getElementById("sunroof"). onclick = doorSet;



This line of code has been added to initForms(). When the user clicks the sunroof check box, the doorSet() function will be called.

2. 
function doorSet() {
  if (this.checked) {
     document.getElementById ("twoDoor").checked = true;
  }
}



This new function checks to see if the sunroof field was checked; if so, it sets the twoDoor radio button to true. If we've clicked the sunroof check box to turn it off, nothing happens.

Tip

  • You may have noticed that there's no check to see if the user clicked the sunroof and then reset the fourDoor radio button. We'll leave that as an exercise for you, the reader.



Previous Page
Next Page