title: Use JS variables and serialize for AJAX request
body: <p>I'd like to have the following code in my AJAX request:</p>
  
  <pre><code>function ajax_post( form_info ){
      var request = $.ajax({
      url: "ajax_handler.php",
      type: "POST",
         data: {data : form_info},
      });
  };
  </code></pre>
  
  <p>I'd like to serialize all of the elements in my clicked event to pass directly to the AJAX function because I'm doing processing on the PHP side. Say I have the following on click function:</p>
  
  <pre><code>$('.open-popup').on("click", function() {
      var clicked_id = $(this).attr('id');
      var contest_id = $('#contest-id').val();
      var contest_type = $('#contest_type').val();
      //serialize everything to a data_to_pass variable
      ajax_post( data_to_pass );
  });
  </code></pre>
  
  <p>How could I serialize the clicked_id, contest_id and contest_type into a single variable to pass to my AJAX processing function as a single string of data?</p>