JavaScript confirm cancel does not work on Laravel Form

Question

I have this confirm:

<script type="text/javascript">
    function ConfirmDelete() {
        if (confirm("Are you sure you want to delete?")) {
            return true;
        }
        else {
            return false;
        }
    }
</script>

and then I have my Laravel form:

{!! Form::open(['action' => ['Test\\TestController@destroy', $thread->id], 'method' => 'delete', 'onsubmit' => 'ConfirmDelete()']) !!}
{!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}
{!! Form::close() !!}

I’m getting the message and if I’m pressing on OK, the thread gets deleted, but that also happens on cancel. What can I do so that nothing happens, if I’m pressing cancel?

score 1 · Accepted Answer · answered Apr 12 '16 at 10:29

1

You can further tidy up your javascript

<script type="text/javascript">
    function ConfirmDelete() {
        return confirm("Are you sure you want to delete?");
    }
</script>

Also, you need to make sure you return the function's response onsubmit, for example

{!! Form::open(['action' => ['Test\\TestController@destroy', $thread->id], 'method' => 'delete', 'onsubmit' => 'return ConfirmDelete()']) !!}

answered Apr 12 '16 at 10:29

LMS94

1,016
1
7
14

Perfect!! Thanks a lot man! -- little other question, the output don't looks so well... is there a way to costum the output? like with a class or bootstrap? – WellNo Apr 12 '16 at 11:21
The confirm alert that is shown is built into the browser so there's no way to style it (that I'm aware of). An alternative would be to use a custom modal, for example, please see the a bootstrap confirmation example: https://ethaizone.github.io/Bootstrap-Confirmation/ – LMS94 Apr 12 '16 at 11:37

score 0 · Answer 2 · answered Apr 12 '16 at 10:24

0

Change to this:

{!! Form::open(['action' => ['Test\\TestController@destroy', $thread->id], 'method' => 'delete', 'onsubmit' => 'return ConfirmDelete()']) !!}

answered Apr 12 '16 at 10:24

staskus

171
8

score 0 · Answer 3 · edited May 23 '17 at 12:31

0

You need to add return statement before function call.

Change the following code

'onsubmit' => 'ConfirmDelete()'

to

'onsubmit' => 'return ConfirmDelete()'

You could also inline it, if you want ;)

'onsubmit' => 'return confirm("Are you sure you want to delete?")'

When calling a JavaScript function in an onclick event handler, the return value of an event handler determines whether or not the default browser behavior should take place as well.

That's the reason why it is getting deleted even when you press Cancel from your confirm dialog.

edited May 23 '17 at 12:31

Community

1
1

answered Apr 12 '16 at 10:33

Muhammad Ali

330
3
13

thanks! works good too :) other question, do you have an idea how I can change the design output with maybe bootstrap? cause the output don't look so good – WellNo Apr 12 '16 at 11:22
You cannot. You can imitate it by using CSS & JS. There are plenty of scripts/plugins that handle it pretty well using bootstrap or other styling frameworks http://jquery-plugins.net/tag/confirm-box – Muhammad Ali Apr 13 '16 at 05:45

JavaScript confirm cancel does not work on Laravel Form

3 Answers3