title: Capture "Form Data" instead of querystring in javascript/jquery
body: <p>I am trying something different to check if it is feasible. Otherwise best alternative way is to send data using querystring.  </p>
  
  <ol>
  <li><p>I have a html page which has list of students. when user clicks on perticular student for edit, this html page should take student ID and redirect to another html page, which will load respective student details for editing.   </p></li>
  <li><p>Here, I want to send data using <strong>"POST"</strong> method to hide studentID from URL (querystring), so I created a hindden form (method="POST" action="edit.html")on list html and put one hidden field under it. on lcik of edit button on list, I am setting value to hidden field &amp; submitting form.   </p></li>
  <li><p>Now this redirects properly to edit html page and also when I see this flow in chrome developer tool, I can see this form value under headers sections - Form data. Now I am trying to fectch this form data on edit html page load e.g. in JQuery under document ready function or simple in javascript.   </p></li>
  <li><p>with alternative option if I create hindden form (method="GET" action="edit.html") then the hidden field value which I am setting is showing up in query string and also in chrome developer tool, it is showing under headers - query string parameters. This query string parameters can easily be accessed using location.search and then play around and will get expected value.  </p></li>
  <li><p>Here id I have taken just example, however in actual scenario, I need to send multiple values or may be objects which I dont want send thrugh query string. So I thought to submit form with POST method and retrive values on next HTML page load thrugh javascript on jquery.  </p></li>
  </ol>
  
  <p><strong>HTML</strong>  </p>
  
  <pre><code>&lt;form style="display: none" action="jquerywebapidoestudenteditpoc.html" method="post" id="formEdit"&gt; &lt;input type="hidden" id="id" name="id" value="" /&gt; &lt;/form&gt;
  </code></pre>
  
  <p><strong>JQuery</strong>  </p>
  
  <pre><code>$(document).on("click", ".edit", function () { var id = $(this).data("id"); $("#id").val(id); event.preventDefault(); $("#formEdit").submit(); });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/2O2iW.png" alt="Chrome Developer tool capture"></p>
  
  <p>If anyone came accross this situation or implemented it in very appropriate way, would be very good.</p>
  
  <p>In other words, I would like to implement is:  </p>
  
  <ol>
  <li>list.html will post data to server (<code>.NET Web API</code>)  </li>
  <li>At same time list.html will redirect to edit.html  </li>
  <li>On load of edit.html, response from server will be loaded on page.  </li>
  </ol>