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
– gretro, Commented Aug 28, 2017 at 12:37

Win · Accepted Answer · 2017-08-28 13:09:40Z

2

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>

edited Aug 28, 2017 at 13:09

answered Aug 28, 2017 at 12:43

Win

62.4k13 gold badges106 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pedro Lopes Over a year ago

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.

Win Over a year ago

I updated the answer. Pleas also make sure you do not have script error in your code.

user8507737 · Accepted Answer · 2017-08-28 12:45:28Z

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, 2017 at 12:45

user8507737

3 Comments

Pedro Lopes Over a year ago

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

user8507737 Over a year ago

then try inline JavaScript confirm <form id="Create" name="Common" onsubmit="return confirm('Are you sure?');">

Pedro Lopes Over a year ago

Doesnt work now im getting the same problem as before where the confirm promp doesnt even show and my controller method gets called instantly

Brian Mains · Accepted Answer · 2017-08-28 13:18:31Z

0

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.

answered Aug 28, 2017 at 13:18

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

1 Comment

Pedro Lopes Over a year ago

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.

Collectives™ on Stack Overflow

How to make confirm dialog box after button click

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related