Why this alert doesn't work using javascript?

Question

I'm working on ASP.NET and on the view I have a code like this, If I use the sweet alert outside the function it works, and If I change the sweet alert in to a regular alert it works too but It doesn't work like the code below. (I also have the script with the library on the view)

 <input type="submit" value="Create" class="btn btn-default" onclick="return foo();" /> <script type="text/javascript"> function foo() { swal("Good job!", "You clicked the button!", "success") return true; } </script> 

Answer 1

ok, you forgot to include library js and css

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> <input type="submit" value="Create" class="btn btn-default" onclick="return foo();" /> <script type="text/javascript"> function foo() { swal("Good job!", "You clicked the button!", "success") return true; } </script> 

Answer 2

When you click the submit button, it is submitting a form.

With an alert, it blocks the browser so the code will wait until you push okay and than submit the form. But the issue when you move to use sweet alert, you can not block the browser action. So you will have to cancel the click and submit the form manually.

 // called onclick of the submit button function foo() { swal("foo") .then(function() { // manually submit the form document.getElementById("yourFormId").submit() }); return false; // cancel the button click } 

 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <form id="yourFormId"> <input type="submit" value="Create" class="btn btn-default" onclick="return foo();" /> </form>