CODEWITHSUNDEEP
javascriptjqueryhtml
Luke Toss
Luke Toss

Reputation: 386

Onclick button show popup box with Yes/No option. Jquery/HTML

I have a button id="contact-submit"when clicked my script is run which sends a message to slack.

What I want is after the user clicks the button I want a popup box to display asking are you sure? Yes/No 

Yes = Sends the message as it does now
No = Closes the popup with no action

Anyone help me out I've been trying for hours!

HTML

<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Log</button>

Script

   $(document).ready(function(){
        $('#contact-submit').on('click',function(e){
            e.preventDefault();
            var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxx'
            var text = 'Some Text Here'
            $.ajax({
                data: 'payload=' + JSON.stringify({
                    "text": text
                }),
                dataType: 'json',
                processData: false,
                type: 'POST',
                url: url
            });
        });
    });

Upvotes: 1

Views: 2055

Answers (1)

kukkuz
kukkuz

Reputation: 42352

You can use the default confirm popup of javascript like this:

if(!confirm("Are you sure?")) 
   return false;

See demo below:

$(document).ready(function() {
  $('#contact-submit').on('click', function(e) {
    e.preventDefault();
    if(!confirm("Are you sure?")) 
       return false;
    var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxx'
    var text = 'Some Text Here'
    $.ajax({
      data: 'payload=' + JSON.stringify({
        "text": text
      }),
      dataType: 'json',
      processData: false,
      type: 'POST',
      url: url
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Log</button>

Upvotes: 2

Related Questions