IF Returns True in Chrome, but False in Safari

Question

My javascript function evaluates differently in Chrome/Firefox vs Safari/Opera. There are a number of answers (i.e. here) about my overall goal of show/hide. I'd rather not use jQuery for this case. Anyway, the main problem I want to address is that the conditionals are not returning the same across all browsers.

If I run my code in Chrome or Firefox, I get the alert: "Foo - New Function Ran." If I run the same code in Safari or Opera, I get the alert: "Foo - Else Function Ran."

I don't know why this is browser specific. I'm happy to go read some additional threads or docs if this is addressed elsewhere, but I can't seem to figure it out.

// Edit: Per request, code simplified to show only relevant portions.

function bar(){
 var addGiftVal = document.forms["subscribe"]["addGift"].value;

 if (addGiftVal == "yes"){
  alert("Bar - Yes Function Ran.");
 }
 
 else {
  alert("Bar - Else Function Ran.");
 }

}

function foo(){
 var subTypeVal = document.forms["subscribe"]["sub_type"].value;
 var subShipVal = document.forms["subscribe"]["ship_address_check"].value;

 if (subTypeVal == "renewal"){
  alert("Foo - Renewal Function Ran.");
  }
 
 else if (subTypeVal == "new"){
  alert("Foo - New Function Ran.");
  }
 
 else {
  alert("Foo - Else Function Ran.");
  }
  
}

<body onLoad="foo();">

<form name="subscribe" id="subForm">
<p><input type="radio" name="sub_type" value="new" id="subf_new" checked="checked" onclick="foo();"> <label for="subf_new">New</label>  
<input type="radio" name="sub_type" value="renewal" id="subf_renewal" onclick="foo();"> <label for="subf_renewal">Renewal</label>   
<input type="radio" name="sub_type" value="gift" id="subf_gift" onclick="foo();"> <label for="subf_gift">Gift</label>    </p>

<p><input type="radio" name="ship_address_check" id="subf_same" value="same" checked="checked"  onclick="foo();"><label for="subf_same">Same</label> </p>
<p><input type="radio" name="ship_address_check" id="subf_different" value="different"  onclick="foo();"><label for="subf_different">Different</label> </p>

<p>Yes or No?</p>
<input type="radio" name="addGift" id="subf_yes" value="yes" onclick="bar();"><label for="subf_yes">Yes</label> 
<input type="radio" name="addGift" id="subf_no" value="no" onclick="bar();"><label for="subf_no">No</label> 

<div id="submitBox"><input type="submit" value="Submit">
</form>

</body>

What is document.forms["subscribe"]["sub_type"] ? Is it a checkbox, dropdown, input, hidden, else? — Jason Williams, Dec 31 '14 at 19:37
Can you chop this code down to a small easily-reproducible example? — Joe Enos, Dec 31 '14 at 19:40
@JoeEnos post edited with chopped code. Simplified HTML posted still generates the same error in Safari v Chrome. — Kilpatrick, Dec 31 '14 at 20:15
Does this issue go away if you click off the radio button and then click on it, again? — Jason Williams, Dec 31 '14 at 20:20
Which version of Safari? Which version of Opera? I tested with Opera v26.0.1656.60 (Windows 7, 64-bit) and it alerts `"Foo - New Function Ran."` like both Chrome and FF. — pete, Dec 31 '14 at 20:26
@DesignBloke: Log your values to find out the issue. This is basic debugging. — , Dec 31 '14 at 20:29

score 0 · Accepted Answer · edited May 23 '17 at 12:10

document.forms["subscribe"]["sub_type"] gives you a collection of elements, not just the selected one. It seems that Chrome allows you to call .value on this collection and get the selected value, but some browsers do not (I don't have Safari, but IE also fails). Regardless, calling .value on the collection is not the right way to do it.

You can see this in action by calling:

document.forms["subscribe"]["sub_type"]

and

document.forms["subscribe"]["sub_type"].value

from within your browser dev tools consoles.

You'll need to use the strategy from these answers to properly get the checked value. If you're not using jQuery, then you either have to do it by looping through the whole group to find the checked one, or using querySelector if you don't care about old browsers.

$("[name=sub_type]:checked").val()
// or
document.querySelector("[name=sub_type]:checked").value
// or
var theValue;
var elems = document.getElementsByName("sub_type");
for (var i = 0; i < elems.length; ++i) {
    if (elems[i].checked) {
        theValue = elems[i].value;
        break;
    }
}

score -2 · Answer 2 · answered Dec 31 '14 at 20:11

The problem is that you are not passing "this" to the function. Try to print out the value of subTypeVal to see what I mean - you'll notice that in Safari, this returns a list of HTML elements, whereas in Chrome, it (correctly or incorrectly) infers that you want the element you clicked.

To remedy this, pass "this" into your function like this:

<input type="radio" name="sub_type" value="renewal" id="subf_renewal" onclick="foo(this);"><label for="subf_renewal">Renewal</label>

and in your javascript, add a parameter into your "foo" function:

function foo(myButton)

and use

var subTypeVal = myButton.value;

instead.

See the jsFiddle here: http://jsfiddle.net/fprfk146/2/

I actually was passing this when I ran into the problem, but after tearing out some of my hair and reading some more questions here, I tried it the way I have it above to see if that would help. Chrome/Firefox – for better or worse – doesn't seem to care if I use this, add/takeaway a semicolon, etc. Safari doesn't work with or without them. Thanks for the example. When I run your jsFiddle on my Mac (10.7.5) in Firefox (34.0.5) it returns "Boo:renewal". However, when I run it in Safari (6.1.6) it returns "Boo:undefined". — Kilpatrick, Dec 31 '14 at 20:36

IF Returns True in Chrome, but False in Safari

2 Answers2