onclick not working

hello this maybe a simple problem but i am a newbee and have tried for 4 days to figure this out and am stuck. i am tring to follow a tutorial to learn how to implement Sentinel into laravel 5.4 master.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sentinel</title>
    <!-- Bootstrap core CSS -->
    <script type="text/javascript" src="{{ asset('/assets/js/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('/assets/js/bootstrap.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('/assets/css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('/assets/css/font-awesome.css') }}">

    <!-- Custom styles for this template -->
    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">


</head>

<body>

<div class="container">
    @include('layouts.top-menu')
    @yield('content')
</div> <!-- /container -->

</body>
</html>

top-menu

<div class="header clearfix">
    <nav>
        <ul class="nav nav-pills pull-right">

            @if (Sentinel::check())
                <li role="presentation">
                    <form action="/logout" method="POST" id="logout-form">
                        {{csrf_field() }}

                        <a href="#" onclick="document.getElementById('logout-form').submit">Logout</a>

                    </form>
                </li>
            @else
                <li role="presentation"><a href="/login">login</a></li>
                <li role="presentation"><a href="/register">Register</a></li>
            @endif

        </ul>
    </nav>
    <h3 class="text-muted">
        @if(Sentinel::check())
            Hello, {{Sentinel::getUser()->first_name }}
        @else
            AllMyFlies
        @endif
    </h3>
</div>

onclick will not work and gives no error please help....

Jaytee

9 years ago

Best Answer

Level 39

This is the line that's failing:

<a href="#" onclick="document.getElementById('logout-form').submit">Logout</a>

submit is a function so it needs to be called like this submit() not submit.

Now, You don't need this for what you're building. You can remove that link completely and replace it with one of these, either one will work.

<input type="submit" value="Logout">
<button type="submit">Logout</button>

You'll usually only use what you currently have when you're making use of Javascript (ajax) or if the link is outside of the form.

2 likes

nvsdi

9 years ago

Level 7

thanks for the quick answer. none of these are working. login works logout redirects from sentinel.dev/login to sentinel.dev/login# but does not log the user out. this is frustrating... do you have any other idea as to what the problem could be?

Thanks again for the help.....

Thyrosis

9 years ago

Level 17

If it redirects to /login#, it means the href argument of the anchor tag is parsed, and not the javascript.

What is the result if you use the form like this?

                    <form action="/logout" method="POST" id="logout-form">
                        {{csrf_field() }}

                        <input type="submit" value="Logout">
                    </form>

Using this kind of submit should post to the /logout route and not put a # in the URL at all.

1 like

nvsdi

9 years ago

Level 7

thank you you are my new hero!!! this fixed the problem..........

nvsdi

9 years ago

Level 7

by the way i made a typo on the first suggestion i added submit () instead of submit() sorry.. this also works now... Thanks a bunch

Thyrosis

9 years ago

Level 17

No worries :) Glad you figured it out as well.

Please or to participate in this conversation.