Search code examples
javascriptjquerytoast

How to pass parameter from button to jquery function?


Expected result:

In button, I want to pass value on onclick event. For e.g. <button id="toastr-three" onclick="callBtnOnclick('123')" > Toast Me </button>

My question is, where can I create callBtnOnclick function to get my 123 value instead of ("#toastr-three").on("click"... ?

!function(p) {
  "use strict";

  function t() {}
  t.prototype.send = function(t, i, o, e, n, a, s, r) {
    debugger;
    var c = {
      heading: t,
      text: i,
      position: o,
      loaderBg: e,
      icon: n,
      hideAfter: a = a || 3e3,
      stack: s = s || 1
    };
    r && (c.showHideTransition = r), console.log(c), p.toast().reset("all"), p.toast(c)
  }, p.NotificationApp = new t, p.NotificationApp.Constructor = t
}(window.jQuery),
function(i) {
  i("#toastr-three").on("click", function(t) {
    debugger;
    event.preventDefault();
    i.NotificationApp.send("Great !!", "Content saved succussfully !!", "top-right", "#5ba035", "success")
  });
}(window.jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js" integrity="sha512-zlWWyZq71UMApAjih4WkaRpikgY9Bz1oXIW5G0fED4vk14JjGlQ1UmkGM392jEULP8jbNMiwLWdM8Z87Hu88Fw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.css" integrity="sha512-8D+M+7Y6jVsEa7RD6Kv/Z7EImSpNpQllgaEIQAtqHcI0H6F4iZknRj0Nx1DCdB+TwBaS+702BGWYC0Ze2hpExQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<button id="toastr-three"> Toast Me </button>


Solution

  • !function(p) {
      "use strict";
    
      function t() {}
      t.prototype.send = function(t, i, o, e, n, a, s, r) {
        debugger;
        var c = {
          heading: t,
          text: i,
          position: o,
          loaderBg: e,
          icon: n,
          hideAfter: a = a || 3e3,
          stack: s = s || 1
        };
        r && (c.showHideTransition = r), console.log(c), p.toast().reset("all"), p.toast(c)
      }, p.NotificationApp = new t, p.NotificationApp.Constructor = t
    }(window.jQuery),
    function(i) {
      i("#toastr-three").on("click", function(t) {
        var something = $(t.currentTarget).data('something');
        event.preventDefault();
        i.NotificationApp.send("Great !!", "Content saved succussfully !!" + something, "top-right", "#5ba035", "success")
      });
    }(window.jQuery);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js" integrity="sha512-zlWWyZq71UMApAjih4WkaRpikgY9Bz1oXIW5G0fED4vk14JjGlQ1UmkGM392jEULP8jbNMiwLWdM8Z87Hu88Fw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.css" integrity="sha512-8D+M+7Y6jVsEa7RD6Kv/Z7EImSpNpQllgaEIQAtqHcI0H6F4iZknRj0Nx1DCdB+TwBaS+702BGWYC0Ze2hpExQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
    />
    
    
    <button id="toastr-three" data-something="123"> Toast Me </button>