CODEWITHSUNDEEP
javascripthtml
Felix
Felix

Reputation: 2661

document.forms.value returning "undefined" only in IE

So I've got a form. In this form I've got a radio button:

<span>
    <label>
      <input type="radio" name="mature" value="0">
        All Ages
      <span class="checkmark"></span>
    </label>

    <label>
     <input type="radio" name="mature" value="1">
        18+
      <span class="checkmark"></span>
    </label>    
</span>

However, in my JS validation for this form, I noticed that in Internet Explorer, this radio button would always return an error.

if (document.forms["imageSubmit"]["mature"].value == "" || document.forms["imageSubmit"]["mature"].value == null) {
    alert(document.forms["imageSubmit"]["mature"].value);
    return false;
}

So for example in this case, the alert will always return "undefined". But, again, only in internet explorer.

Why is this happening?

Edit:

Thank you for the redirect. I've adjusted my code like so:

var mature = document.getElementsByName('mature');
var matureValue = false;

for(var i=0; i<mature.length;i++){
    if(mature[i].checked == true){
        matureValue = true;    
    }
}
if(!matureValue){
    alert("Please fill the Viewing Restrictions field.");
    return false;
}

Upvotes: 0

Views: 541

Answers (1)

Quentin
Quentin

Reputation: 943661

You have multiple elements with the same name.

document.forms["imageSubmit"]["mature"] is a collection, not a single element.

You need to loop over it (like an array) until you one the one with the true checked property.

In HTML 5, radio buttons are special cased so a collection of them will have its own value property representing the currently checked radio button. Internet Explorer is too old to support this feature.

Upvotes: 3

Related Questions