jquery - How to submit form and show result without reload? -

let's have 2 divs in document. first 1 has controlling character , second 1 should used preview, result of user work.

html

<div id="workhere">   <form id="workform" action="php/create_pdf.php" method="post">     <input type="text" class="c" id="inputid">       // etc...   </form> </div>  <div id="preview"></div> 

when user insert value, these values in #workform should sent create_pdf_preview.php , result had depict in #preview.

js + jquery

i tried use .load jquery method , worked. don't know if used in right way , solution looked unacceptable, cause there length limitation method , execution complicated - had collect data js

`var datafield = document.getelementbyid("inputid").value;` 

and use in .load method

$(".c").on('blur', function(){   $("#preview").load("php/create_pdf_preview.php?data=" + datafield); }); 

i know stupid way , know there easier possibilities ajax or json, still wonderland me , reason why question posted. please give me some direction? i'm not asking solution. let ask me if evidence more details. thank much.

use post posting data. post can hold more data , won't exhausted length of data.

try -

$(".c").on('blur', function(){     $.post( "php/create_pdf_preview.php", $( "#workform" ).serialize())     .done(function( data ) {         alert( "data posted: " + data );          //print here          $("#preview").html(data);     }); }); 

you can find here - http://api.jquery.com/jquery.post/

or can use more detailed 1 - -

$(".c").on('blur', function(){   $.ajax({       type: "post",       url: "php/create_pdf_preview.php",       data: $( "#workform" ).serialize(),       success: function(data){           alert( "data posted: " + data );            //print here            $("#preview").html(data);       },       datatype: 'html' // json response or 'html' html response      }); }); 

you can find here - http://api.jquery.com/jquery.ajax/