How to make confirm dialog box after button click

Question

What I'm trying to do is make a confirm dialog box popup when I press to create an item in my view. From what I understand from reading other posts (correct me if I'm wrong) is by using jquery. I'm not very familiar with jquery/javascript so I'm doing my best to understand what I'm doing. The code i found online is this.

<form method="post">
    <input id="Create" name="Common" type="submit" value="Create" />

<script type="text/javascript">
    $(document).ready(function () {
        $("#Create").click(function (e) {
            // use whatever confirm box you want here
            if (!window.confirm("Are you sure?")) {
                e.preventDefault();
            }
        });
    });

How it is right now every time I press the button it fires my POST create method in my controller right away without showing a dialog box. Can someone explain me why that happens and how i can fix it. I have tried adding code where //use whatever confirm box you want here is written but I don't really know what I'm looking for or what it needs to be written there.

Posts i have read

Where i got the above code from

Delete ActionLink with confirm dialog

ASP.NET MVC ActionLink and post method

Attach yourself to the form post event instead of the button click. It will be easier to reason about and should fix your issues. — gretro, Aug 28 '17 at 12:37

Win · Accepted Answer · 2017-08-28T13:09:40.483

One way is to use <input type="button" />. Then call submit() for the form.

<form method="post" id="sampleform">

    <input id="Create" name="Common" type="button" value="Create" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>    
    <script type="text/javascript">
        $(function () {
            $("#Create").click(function (e) {
                if (confirm("Are you sure?")) {
                    console.log('Form is submitting');
                    $("#sampleform").submit();
                } else {
                    console.log('User clicked no.');
                }
            });
        });
    </script>
</form>

If you use ASP.NET MVC, you might want to consider using Html.BeginForm Html Helper.

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { Id = "sampleform"}))
{
    <input id="Create" name="Common" type="button" value="Create" />
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>        
<script type="text/javascript">
    ... Same as above
</script>

Im trying to see if i can get this to work. What currently is happening is. I can see the console.log when i Ok or Cancel the promp but it doesnt seem like my controller method is being called so i dont think the $("#sampleform").submit(); is being called for some reason so im trying to work that out. — Pedro Lopes, Aug 28 '17 at 13:01
I updated the answer. Pleas also make sure you do not have script error in your code. — Win, Aug 28 '17 at 13:10

score 0 · Answer 2 · answered Aug 28 '17 at 12:45

0

try by adding onclick

<form method="post">
    <input id="Create" name="Common" type="submit" value="Create" onclick="DeleteFunction()"/>
...
</form>

<script>
    function DeleteFunction() 
    {
        if(confirm('Are you sure?'))
             return true;
        } else {
             return false;
        }
    }
</script>

answered Aug 28 '17 at 12:45

I tried this and now i get the confirm pop-up but doesnt matter if i press Ok or Cancel it always fires my controller post method – Pedro Lopes Aug 28 '17 at 12:55
then try inline JavaScript confirm `
`
– Aug 28 '17 at 13:03
Doesnt work now im getting the same problem as before where the confirm promp doesnt even show and my controller method gets called instantly – Pedro Lopes Aug 28 '17 at 13:08

score 0 · Answer 3 · answered Aug 28 '17 at 13:18

What you have should work fine. I use the on method but click method should have the same effect. You don't need to specify window.confirm, just confirm will work for this too.

$("#Create").on("click", function (e) {
   // use whatever confirm box you want here
   if (!confirm("Are you sure?")) {
        e.preventDefault();
   }
});

Make sure that:

Run this in the console and see of it returns 1: $("#Create").length If it doesn't return 1, that is a problem
Make sure there are no other JS errors, or that there is no malformed tags on the page.

It returns 1 when i run the code in console. So i dont know what i had done wrong. What Win commented worked so im going to use that for the moment. Will try to see if i can find what i did wrong later for learning purposes. Thank you very much for the comment thought. — Pedro Lopes, Aug 28 '17 at 13:31

How to make confirm dialog box after button click

3 Answers3