Different Behavior of XMLHttpRequest for <input type=“button”> vs. <button>

StackOverflow https://stackoverflow.com/questions/3348605

Question

Consider the following code:

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
        <form>
            <button id="getInfoButton1"></button>
            <input type="button" id="getInfoButton2"></input>
        </form>
    </body>
</html>

With the accompanying JavaScript file:

script.js

window.onload = initAll;
var req;

function initAll()
{
    document.getElementById("getInfoButton1").onclick = getInfo;
    document.getElementById("getInfoButton2").onclick = getInfo;
}

function getInfo()
{
    req = new XMLHttpRequest();
    var URL = "index.html";
    req.open("GET", URL, true);
    req.onreadystatechange = whatsTheStatus;
    req.send(null);
}

function whatsTheStatus()
{
    if (req.readyState != 4) { return; }
    alert(req.status);
}

(I've pared down my code a lot, but this example still highlights the error)

The question is this: When you load this, and click both buttons, the first one will display a status of 0, while the second one displays a status of 200.

Of course, I'm expecting both to display 200, and I have no idea why the <button> is behaving differently. It's not a terribly big deal, but I would like to maintain the same use of <button> throughout my site.

I've looked around the web and asked some other developers at my company, and we can't seem to find the answer. Any ideas?

If it helps, I'm testing on Firefox 3.6.8. Also, I'm running it from localhost via WAMPserver 2.0.

Was it helpful?

Solution

You would need <button type="button"> to reproduce the behaviour of <input type="button">.

If you omit the type on <button> it defaults to submit (except on IE<8 due to a bug; for this reason you should always use a type attribute on <button>). A submit button would cause the form to submit, causing a navigation and cancelling the XMLHttpRequest.

In general you should be trapping onsubmit on the form rather than onclick on a particular button, to ensure you always get informed if the form is submitted by another means such as Enter being pressed. (Consequently you'd use a normal submit button.) Use return false from the event handler to prevent the form submission from going ahead.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top