Display input from box in div

I don’t know if this can be done with javascript or not but anyway.

I want to have an input box and when you click the submit button then I want the text from the input box to be displayed in a div

Yes this can be done with js. The attribute value will contain the text in the input box. Set that as text for the div and done !

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    <style type="text/css">
      html {font:81.25&#37;/1.5 Verdana,sans-serif}
    </style>
  </head>
  <body>
    <form action="showtext.php" id="foo">
      <div>
        <label for="i">Input:</label>
        <input type="text" id="i">
        <input type="submit" value="Submit">
      </div>
    </form>
    <div id="bar">&nbsp;</div>
    <script type="text/javascript" src="foo.js"></script>
  </body>
</html>

foo.js:

document.getElementById("foo").onsubmit = function () {
    var div = document.getElementById("bar");
    div.replaceChild(document.createTextNode(document.getElementById("i").value), div.firstChild);
    return false;
};

In the form there is this line

action="showtext.php"

what goes in showtext.php

That’s where you should put the equivalent functionality to handle non-JavaScript user agents (browsers). In this case I assume that it would generate the same page, but with the specified text rendered in the <div>.

In other words, showtext.php would probably be the same script that generates the page in the first place.