title: Sending data on click
body: <p>I'm using Ajax (along with Django) to perform some action on button click. Before I even get to the view, I am unable to pass data to the javascript function. What is going wrong? How can I pass the button's ID data to the function? I get the message that my <code>request_data</code> is Undefined.</p>
  
  <p>template.html</p>
  
  <pre><code>&lt;button class="btn-green" onclick="request_access()" id="{{ data }}"&gt;Join Group&lt;/button&gt;
  </code></pre>
  
  <p>javascript.js</p>
  
  <pre><code>function request_access(){
      console.log("button clicked");
      var request_data = $(this).attr('id');
      console.log("data: " + request_data);
      $.post({
          url: "request_access/",
          data : { request_data: request_data},
          success : function(json) {
              $("#request-access").hide();
              console.log("requested access complete");
          }
      })
  }
  </code></pre>