Question

Using this piece of code in the head of a page:

<script type="text/javascript">

function vote() {

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

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

    xmlhttp.open('GET', 'update.inc.php', true);
    xmlhttp.send();
}
</script>

and this piece of html code:

<a id="vote" name="vote" onClick="vote();">Link</a>

Everything works properly when the link is clicked, update.inc.php is executed and it outputs to the screen. So i know the ajax is correct.

However, using this piece of php code

echo "<form>
        <input type=\"radio\" name=\"vote\"> yes
        <input type=\"radio\" name=\"vote\"> no
        <input type=\"button\" value=\"$count\" onClick=\"vote();\">
    </form>";

The function vote() no longer fires when i click the input button. What am I doing wrong in this echo statement?

Answer 1

The problem is that your 2 radio buttons are named vote which is ambiguous between the function vote name and the name of your radios. So simply rename your function:

echo "<form>
        <input type=\"radio\" name=\"vote\"> yes
        <input type=\"radio\" name=\"vote\"> no
        <input type=\"button\" value=\"$count\" onClick=\"doVote();\">
    </form>";

and:

function doVote() {
    ...    
}

or rename your radio buttons if you prefer.