CODEWITHSUNDEEP
javascriptjquery
Erfamae Fermo
Erfamae Fermo

Reputation: 89

How can I make an alert pop up that ask "are you sure you want to cancel?"

Currently, I have this jQuery code for my cancel button

$('#cancel').click(function () {
    $('#edit').show();
    $('#savechanges, #cancel').hide();
    $("#target :input").prop("disabled", true);
});

How can I make an alert pop up if I click the cancel button? I know this is simple but I just want to learn.

Upvotes: 1

Views: 913

Answers (6)

Ivan
Ivan

Reputation: 433

You can use sweet alert that isnt look like stone age style 

$('button').click(function(){

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js" integrity="sha256-1pZ3aajcQuFEOG/veUw/WxQjAMJiCSTZo8wH+opDplY=" crossorigin="anonymous"></script>

<button>Popup</button>

Upvotes: 0

thanhdx
thanhdx

Reputation: 618

You can use confirm API:

if(confirm("Are you sure?"))
{
    //Ok button pressed...
}
else
{
    //Cancel button pressed...
}

Docs here: https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm

"OK" and "Cancel" button can't be change text to Yes/No or anything else that works cross-browser. If you want that, you can find a jquery plugin for custom create a dialog for your own.

Upvotes: 1

Silverfang
Silverfang

Reputation: 359

use alert('Are you sure you want to delete') for this. Or maybe you want to use confirm('press ok to confirm').

    <script>
    function myFunction() {
      var txt;
      var r = confirm("Press a button!");
  //alert("Hello\nHow are you?");

      if (r == true) {
        txt = "You pressed OK!";
//write you own functionality here.

      } else {
        txt = "You pressed Cancel!";
      }

    }
    </script>

Upvotes: 0

Ankita Kuchhadiya
Ankita Kuchhadiya

Reputation: 1282

You can use the confirm alert to make sure the user confirms their action before proceeding with the code you want for the cancel event.

$('#cancel').click(function() {
  if (confirm('Are you sure?')) {
    $('#edit').show();
    $('#savechanges, #cancel').hide();
    $("#target :input").prop("disabled", true);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="cancel">cancel</button>
<button id="savechanges">Save</button>
<div id="edit">edit</div>

Upvotes: 1

Patrick Vogt
Patrick Vogt

Reputation: 916

The easiest way could be the simple window.confirm('...') solution.

https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm

Upvotes: 0

Vijay Joshi
Vijay Joshi

Reputation: 959

Here are some examples for different types of prompts

$(function() {

  $("[data-confirm]").on("click", function(){
      return confirm($(this).data("confirm"));
  });

  $("[data-alert]").on("click", function(){
      return alert($(this).data("alert"));
  });

  $("[data-prompt]").on("click", function(){
      return prompt($(this).data("prompt"));
  });
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-confirm="Confirm!">Window.confirm()</button>
<button data-alert="Alert!">Window.alert()</button>
<button data-prompt="Prompt!">Window.prompt()</button>

Upvotes: 0

Related Questions