pass data from button onclick to ajax code

Question

I have a problem in Ajax.

My JS File:

$(document).ready(function() {
  $(document).ajaxStart(function() {
    $("#wait").css("display", "block");
  });
  $(document).ajaxComplete(function() {
    $("#wait").css("display", "none");
  });
  $("button").click(function() {
    $.post("ajax", {
        name: "Donald Duck",
        _token: "{!! csrf_token() !!}",
        city: "Duckburg"
      },
      function(data, status) {
        alert("Data: " + data + "\nStatus: " + status);
      });
  });
});

my html code:

<div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;">
  <img src='demo_wait.gif' width="64" height="64" />
  <br>Loading..</div>

<button>Start</button>

And it works fine , I need passing a value from button code to Javascript, which I then use for the Post URL.

I changed the js file to:

function MyJS(str) {
  $(document).ready(function() {
    $(document).ajaxStart(function() {
      $("#wait").css("display", "block");
    });
    $(document).ajaxComplete(function() {
      $("#wait").css("display", "none");
    });
    $("button").click(function() {
      $.post("ajax" + str, {
          name: "Donald Duck",
          _token: "{!! csrf_token() !!}",
          city: "Duckburg"
        },
        function(data, status) {
          alert("Data: " + data + "\nStatus: " + status);
        });
    });
  });
}

and my new html code is:

  <div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;"><img src='demo_wait.gif' width="64" height="64" /><br>Loading..</div>
<button onclick="MyJS('9');">Start</button>

After the changes, the code seems to stop working.

Satpal · Accepted Answer · 2016-04-21 16:06:29Z

1

You can use data-* prefixed custom attributes to store arbitrary information with the element which can be used later.

<button data-key="9">Start</button>

Then using your existing click handler, You can use Element.dataset property to access the data. Using jQuery the same result can be achieved using .data('key') method.

$("button").click(function() {
    var str = this.dataset.key; //$(this).data('key')
});

Note: And get rid of inline-click handler.

answered Apr 21, 2016 at 16:06

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mplungjan Over a year ago

A button without type="button" is a submit in many browsers

mplungjan · Accepted Answer · 2016-04-21 16:15:12Z

Do not put your document.ready and your ajaxStart code in a function
add type="button" to not submit the page to itself in several browsers
use the data attribute or value to pass the string to your server:

Like this

$(document).ready(function() {
  $(document).ajaxStart(function() {
    $("#wait").css("display", "block");
  });
  $(document).ajaxComplete(function() {
    $("#wait").css("display", "none");
  });
  $("button").click(function() {
    $.post("ajax", {
        id:$(this).data("id"),
        name: "Donald Duck",
        _token: "{!! csrf_token() !!}",
        city: "Duckburg"
      },
      function(data, status) {
        alert("Data: " + data + "\nStatus: " + status);
      });
  });
});

using

<button type="button" data-id="9">Start</button>

or use

$(this).val();

with

<button type="button" value="9">Start</button>

Collectives™ on Stack Overflow

pass data from button onclick to ajax code

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related