Form post on same page without refreshing

Question

How can i submit form on same page without refreshing page.I know that is possible with ajax but i am not perfect in ajax my native programming language PHP.

HTML

<input type="submit" class="topopup1" value="Preview" onclick="capture();" >
<form method="POST" enctype="multipart/form-data"  id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>

Javascript

function capture() {
$('.showcase').html2canvas({
    onrendered: function (canvas) {
        //Set hidden field's value to image data (base-64 string)
        $('#img_val').val(canvas.toDataURL("image/png"));
        //Submit the form manually
        document.getElementById("myForm").submit();}
     });
  }

PHP

<?php


  //Show the image
  if(isset($_POST['img_val'])){
  echo '<img src="'.$_POST['img_val'].'" />';


  //Get the base-64 string from data
  $filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
  //Decode the string
  $unencodedData=base64_decode($filteredData);

  //Save the image
  file_put_contents('img.png', $unencodedData);
   }
   ?>

Answer 1

Use $.post :

// When submitting form below is run
$( "#myForm" ).submit(function( e ) {
    // prevent form from sending like normal
    e.preventDefault();
    // Send post with ajax, with the postdata of the html form, whatever your page returns you can catch with .done(function(data));
    $.post( "", $( "#myForm" ).serialize() ).done(function( data ) {
        console.log( "return data: " + data );
    });
}

Answer 2

ya i found it answer.In my case my php response is image.Now i sand submit form with ajax function .submit with set the target where result show.and also now i don't need form action on same page So i have changed action on save.php.

  $("#myForm").ajaxForm
  ({
  target: '#preview'
  })
  .submit();

HTML

<input type="submit"   value="Preview" onclick="capture();" >
 <form method="POST" action="save.php" enctype="multipart/form-data"  id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
 </form>

Answer 3

(Using jQuery AJAX is not hard at all! This is just for demo, not a solution to your code:

jQuery / JavaScript

var myId = "this_is_my_id";

var myAjax = $.ajax({
  url: "script.php", //The url to your .php script
  type: "POST", //Method av sending data (POST / GET)
  data: {id : myid}, //variables to send (if GET it looks like this  script.php?id=this_is_my_id ) 
  dataType: "json" //The expected datatype of the answer
});

myAjax.done(function(the_data) {
  //
  // Place magic code that transform the json data (the_data = javascript object) you got from the script
  //
  $("#mydiv").html( your_magic_code );
});

myAjax.fail(function(jqXHR, message) {
  alert( "Failed: " + message );
});

PHP (script.php) :

$id = $_POST['id'];

//MAGIC PHP CODE

echo json_encode( MAGIC_CODE_TO_RETURN ); //I.e converting an array to json