CODEWITHSUNDEEP
javascriptformsgetelementbyidgetelementsbytagnamegetelementsbyname
Philip7899
Philip7899

Reputation: 4677

Why isn't GetElementsByTagName working in this form?

I have a form up at avidest.com/new. The first field is a radio button. Underneath the email field is a hint that should change depending on which value is selected for the radio button. If employer is selected, the hint should say "please use your company e-mail address." If freelancer is selected, the hint should say "please use your school e-mail address.". For some reason, my javascript code is not working. I've tried replacing getElementsByTagName with just GetElementsByName but that does not work. Here is the function that I write in the < head > section of the html page:

<script>
function topHint(){
  if(document.getElementsByTagName('Type').value == "Freelancer"){
    document.getElementById('employorlance').innerHTML = "Please use your school e-mail address.";
  }
  if(document.getElementsByTagName('Type').value == "Employer"){
    document.getElementById('employorlance').innerHTML = "Please use your company e-mail address.";
  }
}
</script>

I then call the function when the page loads:

<body onload = "topHint()">

And here is the form elements on the page:

<label id="item4_0_label">
    <input type="radio" id="item4_0_radio" data-hint=""  required value="Freelancer" name="Type" />
        <span class="fb-fieldlabel" id="item4_0_span">Freelancer
        </span>
</label>
<label id="item4_1_label">
    <input type="radio" id="item4_1_radio"  required value="Employer" name="Type" />
        <span class="fb-fieldlabel" id="item4_1_span">Employer
        </span>
</label>
<div class="fb-hint" id ="employorlance" style="color: rgb(136, 136, 136); font-weight: normal; font-style: normal; ">
    Please use your school email address.
</div>

Thanks.

After suggestions from stakoverflow, I tried the following but it is still not working:

function topHint() {
  var elems = document.getElementsByName("Type");
    for (i in elems) {
        if (elems[i].value == "Freelancer") {
          document.getElementById('employorlance').innerHTML = "Please use your school e-mail address.";
        }

        if (elems[i].value == "Employer") {
          document.getElementById('employorlance').innerHTML = "Please use your company e-mail address.";
        }
    }
}

Upvotes: 0

Views: 4119

Answers (4)

Guffa
Guffa

Reputation: 700362

The getElementsByTagName method doesn't return a single element with the matching name, it returns an array of elements with the matching tag names.

In your case you will get an empty array, because you don't have any <type> elements.

The getElementsByName method also returns an array, and you always get all the radio buttons, not only the selected one, so you have to check the status:

function topHint(){
  var radios = document.getElementsByName('Type');
  if(radios[0].checked){
    document.getElementById('employorlance').innerHTML = "Please use your school e-mail address.";
  }
  if(radios[1].checked){
    document.getElementById('employorlance').innerHTML = "Please use your company e-mail address.";
  }
}

Upvotes: 2

Brian Rogers
Brian Rogers

Reputation: 129707

I think what you really want is this:

<script>
function topHint(){
  if (document.getElementById('item4_0_radio').checked) {
      document.getElementById('employorlance').innerHTML = 
         "Please use your school e-mail address.";
  }
  else {
      document.getElementById('employorlance').innerHTML = 
         "Please use your company e-mail address.";
  }
}
</script>

Then, on each radio button add: onclick="topHint();"

Upvotes: 0

Alfred Xing
Alfred Xing

Reputation: 4632

getElementsByTagName selects the HTML tag name (body, input, form, etc.)

You want to use document.getElementsByName("Type"):

var elems = document.getElementsByName("Type");

function topHint() {
    for (i in elems) {
        if (elems[i].value == "Freelancer" && elems[i].checked) { ... }
        if (elems[i].value == "Employer" && elems[i].checked) { ... }
    }
}

Upvotes: 1

dchiang
dchiang

Reputation: 67

As you already have unique ids on the radio buttons, why not use document.getElementById? 

if(document.getElementById('item4_0_radio').checked){
    // change the hint text
}

Upvotes: 0

Related Questions