Uncaught TypeError: Cannot call method 'submit' of null

Question

Here is a picture of the error. This error appeard after I made some changed to my project. When you press the button it's supposed to go to a controller for logging a user of the website. I remade my layout to bootstrap and changed/deleted alot of the CSS belonging to the site. This might be related but not sure how. Here is the code for the button:

@if (Request.IsAuthenticated) {
    <text>
        Hello, @Html.ActionLink(User.Identity.Name, "Manage", "Account", routeValues: null, htmlAttributes: new { @class = "username", title = "Manage" })!
        @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {
            @Html.AntiForgeryToken()
            <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
        }
    </text>
} else {
    <ul>
        <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

Does anyone know why this might be occurring?

Answer 1

I would assume your problem is on this line.

@using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {

Check your pages source, and I would be that your action looks something like this on your form.

action="Account/LogOff?id=logoutForm"

Solution:

@using (Html.BeginForm("LogOff", "Account", null, FormMethod.Post, new { id = "logoutForm" })) {

That should fix it for you :)

Update:

You can switch the code around to make it work differently, but still work.

Option 1:

paste this at the end of your Layout file.

<script>$(function() {
    $('#logoutForm a').on('click', function () {
          $('#logoutForm').submit();
     });
</script>

Option 2:

Change the tag to a

<button type="submit">Log Off</button> <!-- no JavaScript -->

Option 3:

<!-- I think this will work -->
<a onclick="document.getElementById('logoutForm').submit()">Log Off</a>

I personally like option 2, because you are just using a submit button like you are supposed to, instead of JavaScript.

Update #2:

@using(Html.BeginForm("LogOff", "Account", null, FormMethod.Post, new { id = "logoutForm" }) {
    @Html.AntiForgeryToken()
    <button type="submit">Log Out</button>
}

Should produce:

<form action="/Account/LogOff" method="POST" id="logoutForm">
   <input type="hidden" name="__RequestVerification" value="***" />
   <button type="submit">Log Out </button>
</form>

Take note of the action and the method attributes. Additionally make sure to remove the text tags from your code as they are meant to force Razor syntax to accept whatever is between them as text and not Razor syntax.