How to send data from one page to another without page load?

Question

I have two page one customform.php and another is preview.php.

I want to send some data which are values of some text-fields on customform.php using jquery post method. But I dont want the page to load. So I have used some JQuery code for this work. But now working for me.

the html code on customform.php is:

<form action="#" method="post">
<input type="text" value="" id="text1">
<input type="text" value="" id="text2">
<input type="button" value="preview" id="preview">
</form>

The jQuery code on customform.php is:

$('#previewph').click( function() {
    var v1 = $.('#text1').val();
        var v2 = $.('#text2').val();

 alert("Mail: " + v1 + " Message: " + v2);

$.post( "http://www.lexiconofsustainability.com/lex_tmp2/preview/" ,{ name : v1 , title :v2 });

  window.open("http://www.lexiconofsustainability.com/lex_tmp2/preview/", '_blank');
});

And on the preview.php I want to retrieve value form post method and echo them.

<?php 
echo  $authorname = $_POST['name'];
echo  $posttitle = $_POST['title'];
?>

Answer 1

You can use AJAX for this..

The jQuery code on customform.php should be:

$('#previewph').click( function() {
    var v1 = $('#text1').val();
    var v2 = $('#text2').val();
$.post("preview.php", {name:v1, title:v2}, function(data)
{
   alert(data);
});
});

preview.php

<?php 
if(isset($_POST['name'])&&($_POST['title']))
{
echo  $authorname = $_POST['name'];
echo  $posttitle = $_POST['title'];
}
?>

Answer 2

Simply Try this

  <form action="#" method="post" >
<input type="text" value="" id="text1">
<input type="text" value="" id="text2">
<input type="submit" value="preview" id="preview" onclick="senddata()" >
</form>
<div id="message"></div>

function senddata() {
var v1 = $.('#text1').val();
        var v2 = $.('#text2').val();

$.post("http://www.lexiconofsustainability.com/lex_tmp2/preview/", { name : v1 , title :v2  },
   function(data) {
      document.getElementById("message").innerHTML = data;    
   });

   }