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

Question

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
            });
        });
    });

score 2 · Accepted Answer · answered Sep 02 '17 at 08:16

2

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>

answered Sep 02 '17 at 08:16

kukkuz

41,512
6
59
95

1

You Sir/Madam deserve a medal :D excellent - thank you very much! Will uptick once I can – Luke Toss Sep 02 '17 at 08:20
Sorry, one quick question, no big issue if its not easily done. Quite pedantic but it says Ok/Cancel - Is there a quick way to change this to Yes/No :) – Luke Toss Sep 02 '17 at 08:29
1

@LukeToss here is question how to create confirm popup using jQuery UI https://stackoverflow.com/questions/887029/how-to-implement-confirmation-dialog-in-jquery-ui-dialog you can also find plugins that implement this type of popup, but you'll need to use calllbacks because only builtin confirm prompt nad alter are blocking. – jcubic Sep 02 '17 at 09:18
Thank you very much - I will look into this – Luke Toss Sep 02 '17 at 09:21

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

1 Answers1