Display form result in same div

PHP
1

Good day to you all,
I’m working on a form which would display the result in the same div that the form is.

Here is my code so far:




      <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
         <textarea name="html"></textarea><br />
         <input type="submit" onclick="load('<?php echo $_SERVER['PHP_SELF']; ?>','page');"/><br />
      </form>


      Preview:<br />
      <?php if(isset($_POST['html'])) echo stripslashes($_POST['html']); ?>



<script type="text/javascript">
function ahah(url, target) {
  document.getElementById(target).innerHTML = ' Fetching data...';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}

function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" Error:\
"+ req.status + "\
" +req.statusText;
    }
  }
}

function load(name, div) {
	ahah(name,div);
	return false;
}



</script>

My problem is when I click on the button , the text in my text area don’t show.

Can somebody help me.

Thanks!

2

Hey.

I’m not entirely sure what you are trying to do there, but it makes very little sense to do an AJAX request to the same page you are on. Usually AJAX request are made to other pages to send/retrieve data from the server.

Like, consider this code:


<!DOCTYPE html>
<head>
    <title>AJAX Example</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        // Add the "submit" event callback to the form
        window.onload = function() {
            var form = document.getElementById('main_form');
            if(form.addEventListener){ // Standard method
                form.addEventListener('submit', on_submit, false);
            }
            else if(form.attachEvent){// IE crap
                form.attachEvent('onsubmit', on_submit);
            }
        }

        // The form's "submit" callback function
        function on_submit(e) {
            // Fetch the form data and create a data string for the AJAX call
            var raw_html = document.getElementById('text_html').value;
            var post_data = 'html=' + encodeURIComponent(raw_html);

            // Do an AJAX call to submit the text.
            var ajax = new XMLHttpRequest();
            ajax.onreadystatechange = function() {
                if(ajax.readyState == 4) {
                    if(ajax.status == 200) {
                        document.getElementById('preview_box').innerHTML = ajax.responseText;
                    }
                    else {
                        alert('AJAX call failed!');
                    }
                }
            }
            ajax.open('POST', 'target.php', true);
            ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            ajax.send(post_data);

            // Stop the form from being submitted
            if(typeof event != 'undefined' && event) { // IE crap
                event.returnValue = false;
            }
            else { // Standard method
                e.preventDefault();
            }
            return false;
        }
    </script>
</head>
<body>
    <form id="main_form" action="target.php" method="post">
        <textarea name="text" id="text_html"></textarea>
        <input type="submit">
    </form>
    <div>
        <span>Preview</span>
        <pre id="preview_box"></pre>
    </div>
</body>
</html>

This code uses AJAX to send the contents of the <textarea> to a PHP script called “target.php”, and put the response from that script into the <pre> box.

Is this what you are trying to do, or am I not understanding you?

3

First of all you dont have a target DIV created already. So create a div having the ID ‘page’ in around your preview text.

<div id="page"></div>

Then put the following code in a separate page (ajax.php):


if(isset($_POST['html'])) echo stripslashes($_POST['html']);

And to use $_POST you must use AJAX post not GET. Try to learn how to post via AJAX. And if you want to send the value through query string to AJAX file then you should send the values via query string and use $_GET array in your PHP:


if(isset($_GET['html'])) echo stripslashes($_GET['html']);

Then call the load function like this:


<input type="button" name="btnclick" value="Preview" onclick="load('ajax.php', 'page');" />