Display form result in same div

[Peuplarchie]

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:\n"+ req.status + "\n" +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!

[TenaciousC]

I could be wrong, but this is probably an issue with your JavaScript. I would recommend using JQuery for AJAX (or any JavaScript stuff, really). It makes life a lot easier to deal with.

Also, where is your div that you are trying to put this information into? It would appear that you are trying to load something into a div with an id of "page". Is that correct?

[johanafm]

It's half right anyway.

<input type="submit" onclick="whatever()" />

Whatever is supposed to happen when the onclick event triggers won't matter since the form is submitted to the server, which serves a new page. The new page replaces the old in the browser. Your browser doesn't care about where it was or where it's going. It deals with one page at the time, oblivious to anything else.
As such, what you want is a button, not a submit.

Other than that, use a browser that is able to provide useful feedback when developping, no matter what your target group uses. To me, that means Firefox, with its excellent error console, and the much needed Firebug extension.
It should tell you about getElementById(target) being null (at least once you get rid of the form submit), since target contains the string 'page' which doesn't exist anywhere.

You should never trust innerHTML to do what you want either. Use the DOM instead.

var d = document;
var o = d.getElementByd(target);	// assuming target contains an existing id of some element
while(o.childNodes.length)
	o.removeChild(o.lastChild);
o.appendChild(d.createTextNode('some text'));