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

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

문제

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.

도움이 되었습니까?

해결책

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.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top