title: pass data from button onclick to ajax code
body: <p>I have a problem in Ajax.</p>
  
  <p>My JS File:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(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);
        });
    });
  });
  </code></pre>
  
  
  
  <p>my html code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;"&gt;
    &lt;img src='demo_wait.gif' width="64" height="64" /&gt;
    &lt;br&gt;Loading..&lt;/div&gt;
  
  &lt;button&gt;Start&lt;/button&gt;
  </code></pre>
  
  
  
  <p>And it works fine , I need passing a value from button code to Javascript, which I then use for the Post URL.</p>
  
  <p>I changed the js file to:</p>
  
  <pre class="lang-js prettyprint-override"><code>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);
          });
      });
    });
  }
  </code></pre>
  
  
  
  <p>and my new html code is:</p>
  
  <pre><code>  &lt;div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;"&gt;&lt;img src='demo_wait.gif' width="64" height="64" /&gt;&lt;br&gt;Loading..&lt;/div&gt;
  &lt;button onclick="MyJS('9');"&gt;Start&lt;/button&gt;
  </code></pre>
  
  <p>After the changes, the code seems to stop working.</p>