Use onclick button to execute script - HTML/Jquery/Javascript

Question

Can anyone help me put my 3 pieces of code together? I can run the script fine and it works I just dont know how to align this to a onclick button event

1) User clicks button.
2) Script is executed and sends message to API

IN HTML

<script src="jquery-git.js" type="text/javascript">
<script src='slackapi.js'></script>

Button to execute script

<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Send Message</button>
</fieldset>

slackapi.js Script

var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
var text = 'This is a message'
$.ajax({
    data: 'payload=' + JSON.stringify({
        "text": text
    }),
    dataType: 'json',
    processData: false,
    type: 'POST',
    url: url
});

Death-is-the-real-truth · Accepted Answer · 2017-09-01 23:08:44Z

1st option:-

You need to wrap slackapi.js code inside $(document).ready(function(){..}); and button click like below:-

slackapi.js:-

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

2nd option is:-

Wrap your slackapi.js code inside a function and call that function on button click like below:-

function runIt(){
    var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    var text = 'This is a message'
    $.ajax({
        data: 'payload=' + JSON.stringify({
            "text": text
        }),
        dataType: 'json',
        processData: false,
        type: 'POST',
        url: url
    });

}

And call it in current page like below:-

$(document).ready(function(){
    $('#contact-submit').on('click',function(e){
        e.preventDefault();
        runIt();
    });
});

Note:- make Sure in both cases jQuery library included before this script included in your code.

@LukeToss i have edited my answer with more option. So please have a look.Thanks

rollingthedice · Accepted Answer · 2017-09-01 23:03:04Z

This should work in your slackapi.js file:

!function (){
   function someFunction(){
      var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
      var text = 'This is a message'
      $.ajax({
         data: 'payload=' + JSON.stringify({
           "text": text
         }),
         dataType: 'json',
         processData: false,
         type: 'POST',
         url: url
      });
    }
    $('body').on('click', '#contact-submit', someFunction);
}();

Collectives™ on Stack Overflow

Use onclick button to execute script - HTML/Jquery/Javascript

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related