title: How to submit form and show result without reload?
body: <p>Let's say I have two divs in a document. The first one has controlling character and the second one should be used as a preview, the result of the user work.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="workHere"&gt;
    &lt;form id="workForm" action="php/create_pdf.php" method="POST"&gt;
      &lt;input type="text" class="c" id="inputId"&gt;
        // etc...
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="preview"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When the user insert some value, all these values in <code>#workForm</code> should be sent to <code>create_pdf_preview.php</code> and the result had to depict in <code>#preview</code>.</p>
  
  <p><strong>JS + jQuery</strong></p>
  
  <p>I tried to use <code>.load</code> jQuery method and actually it worked. But I don't know if I used it in right way and this solution looked unacceptable, cause there is the length limitation for the GET method and the execution was too complicated - I had to collect data to JS</p>
  
  <pre><code>`var datafield = document.getElementById("inputId").value;`
  </code></pre>
  
  <p>and then I could use it in <code>.load</code> method </p>
  
  <pre><code>$(".c").on('blur', function(){
    $("#preview").load("php/create_pdf_preview.php?data=" + datafield);
  });
  </code></pre>
  
  <p>I know this is stupid way and also I know there are easier possibilities with AJAX or JSON, but this is still a wonderland for me and this is the reason why this question is posted. Could anyone please give me <strong>some direction</strong>? I'm not asking about any solution. Let ask me if I would evidence more details. Thank you very much.</p>