Search code examples
javascripthtmlasp.netvisual-studio-2015iis-10

HTTP Error 405.0 - Method Not Allowed - Form Tag

I have an ASP.NET Web Forms (same problem with MVC) project that I'm trying to use to host simple JavaScript exercises with an HTML form that I have added.

Similar questions on this topic have not led me to a solution. I'm guessing I have to add a special handler in IIS for a HTML page?

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
    <meta charset="utf-8" />
</head>
<body>
    <br />
    <form method="post" action="/test/tasks.html" id="theForm">
        <fieldset>
            <legend>
                Enter an item to be done.
            </legend>
            <div>
                <label for="task">Task</label>
            </div>
            <div>
                <input type="text" name="task" id="task" required="required" />
            </div>
            <input type="submit" value="Add it!" id="submit">
            <div id="output"></div>
        </fieldset>
    </form>
    <script src="Scripts/tasks.js"></script>
</body>
</html>
Solution

  • The standard way to handle forms that have nowhere to submit (like yours) is simply to not have a submit button (which are almost just a button that calls form.submit()). Things to pay attention to:

    • Set the "type" of your button element to "button" (the default is "submit").
    • Don't use onclick="foo()". In order to preserve separation between form and function, add click handlers through addEventListener (or equivalent)
    • Don't try and modify the DOM until after all the content is loaded, it doesn't exist yet.
    • Using javascript DOM methods to create DOM elements is counter-intuitively inefficient, just add on extra HTML if you can.

    Something like this:

    <!DOCTYPE html>
<html>
<head><title>Foo</title></head>
<script type="text/javascript">
"use strict";

var javascript_DOM_methods_are_efficient = false;

function displayResult() {
    var results = document.getElementById('results');
    if (javascript_DOM_methods_are_efficient) {
        results.append(document.createTextNode("extraordinary"));
        results.append(document.createElement('br'));
    } else {
        results.innerHTML += "extraordinary<br />";
    }
}

function init() {
    document.getElementById("eric").addEventListener( "click", displayResult, false );
}

document.addEventListener( "DOMContentLoaded", init, false );
</script>
<body>
    <form name="form">
        <button type="button" id="eric">half a button</button>
    </form>
    <div id="results">
    </div>
</body>