Question

I can’t figure out why the getMoreInfoResults() function doesn’t pass on the value of the radio button (when one is selected) to the GET request. Anyone know why?

<form name="question_form">
    <input type="radio" name="vote" value="1" onclick="getVote(this.value)" />Yes<br />
    <input type="radio" name="vote" value="2" onclick="getVote(this.value)" />No<br />
    <textarea rows="3" name="moreInfo" onkeyup="getMoreInfoResults(document.question_form.vote.value, this.value)" /></textarea><br />
    <input type="submit" value="Submit" />
    <div id="otherAnswers"></div>
</form>

This is my javascript:

function getMoreInfoResults(vote, input) {

if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("otherAnswers").innerHTML=xmlhttp.responseText;
}
}

xmlhttp.open("GET","phpPoll/phpPoll_userDefined/functions/getMoreInfoResults.php?vote=" + vote + "&moreInfo=" + input,true);
xmlhttp.send();
}

Thanks.

Answer 1

document.question_form.vote expression will give you a NodeList object, not a Node one. Obviously, its value property is undefined.

One possible workaround is to create a function that will retrieve value of the checked radio button:

function getCheckedValue(radioNodes) {
    for (var i = 0, l = radioNodes.length; i < l; i++) {
        if (radioNodes[i].checked) {
            return radioNodes[i].value;
        }
    }
}

… and use it instead of querying the value directly:

onkeyup="getMoreInfoResults(getCheckedValue(document.question_form.vote), this.value)"