Ajax get $_POST for preview, but cant submit post.

[eevan79]

I'm using ajax to preview post before submit. But there is problem. I have in <form action javascript (for preview post) instead of submit.

 

Anyway here is my code:

 

HTML (Ajax):

<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
             // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function get(obj) {
      var poststr = "reply=" + encodeURI( document.getElementById("reply").value );
      makePOSTRequest('preview.php', poststr);
   }
</script>

 

Here goes preview:

<span name="myspan" id="myspan"></span>

 

Form:

<form name="myForm" method="post" action="javascript:get(document.getElementById('myform'));">

<textarea class="reply" id="reply" name="reply" style="height:260px;width:680px;"></textarea>

<input type="submit" class="inputButton" value="(SUBMIT_REPLY)" />

 

preview.php

<?php
$mytext = $_POST['reply'];
echo "Preview: <hr>".$mytext."<hr>";
?>

I have only preview form, but cant submit post.

 

Before I implement this preview script my form was:

<form name="myForm" method="post" onsubmit="doCheck()" action="reply.php?t={T_ID}&page={PAGE}">

 

How to have submit and preview buttons in this post form?

[eevan79]

I solve it...Now I got two forms. For preview and for submit.

<form name="myForm" method="post" onsubmit="doCheck()" action="reply.php?t={T_ID}&page=(PAGE)"> 

...then <textarea ....</form>

 

and after:

<form name="myForm" method="post" action="javascript:get(document.getElementById('myform'));">
<input type="submit" class="inputButton" value="Preview" />

 

But it looks ugly, cause buttons are not inline, but in new line:

<SUBIT>

<PREVIEW>

 

I want to be: <SUBMIT> <PREVIEW>

[radar]

why not just do

 

    <input type="submit" value="Preview" name="preview" class="signsub" id="preview" onClick="showPreview(); return false"/>

      <input type="submit" name="submit" id="submit" value="Submit" />

 

one form, 2 buttons....  add 10 more that way if you want -- it's all in the way you handle the processing of those buttons.

 

also when using ajax, you don't need an action because the action should be in the ajax itself or passed into the ajax through a parameter.

[eevan79]

Ok, now its working, but I want to add some cosmetics.

 

Loading image preview or whatever would be nice and I have tried to implement it, but its not working. Image is loaded always after post content.

 

How to display image (ex. loading.gif) on mouse click, before preview content appear?

[radar]

run a body onload command to preload the image.  just like you do with JS rollovers.

[eevan79]

Ok I solve it, but now I noticed when I insert "&" character preview failed.

Here is code:

<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters) {
   document.getElementById('myspan').innerHTML = '<div align="center"><img src="img/loader.gif" /></div>';
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
             // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function get(obj) {
      var poststr = "reply=" + encodeURI( document.getElementById("reply").value );
      makePOSTRequest('preview.php', poststr);
   }
</script>
    <span name="myspan" id="myspan"><a name="myspan" href=""></a></span>

 

I have tried to filter it in preview.php:

$mytext = ($_POST['reply']);

$mytext = htmlentities($mytext);

or

$mytext = htmlspecialchars ($mytext);

But still preview fail.