Make Result 2 Stay on Same Page

JavaScript
1

When I hit the submit button, the result are display on a new page. how do I force it to stay on the same page, here’s my code.

<HTML>
<HEAD>
<TITLE>Test Input</TITLE>

<script type="text/javascript">
function addtext() {
   var newtext = document.myform.inputbox.value;
   document.writeln(newtext);
}
</script>

</HEAD>

<BODY>

<FORM NAME="myform">Enter something in the box: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE="">
<INPUT TYPE="button" NAME="button" Value="Check" onClick="addtext()">
</FORM>


</BODY>
</HTML>

any comments or suggestions would be greatly appreciated.

2

You’re not actually submitting the form to anything because you don’t have a submit button. To submit a form to somewhere you need an input with type=“submit” or use the form’s submit method in js.

All you are doing is using an ordinary button with an onclick event handler that calls a js function.

Your js function is using document.writeln() wich displays the results in a new page because the current page has already completed loading when addtext() is called.

You should be using DOM methods and not document.writeln() to output results to the same page.

3

I have modified your script to write to the same page and also to submit the form. The submit part is a note only at this stage.

<html>

<head>

<title>Test Input</title>
<script type=“text/javascript”>
<!–
function addtext()
{ var newtext = document.myform.inputbox.value;
var elem=document.getElementById(“writeHere”);
elem.innerHTML=newtext;
// to sumbit the form at this point use
// document.myform.submit();
}
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, sans-serif; font-size:13px; font-weight:normal; color:#000; background-color:#FFF; }
.a14B { font-weight:bold; font-size:18px; color:#F00; }
–>
</style>
</head>

<body>

<form name=“myform” action>
<p>Enter something in the box: <br>
<input type=“text” name=“inputbox” value size=“20”>
<input type=“button” name=“button” value=“Check” onclick=“addtext()”></p>
</form>
<!-- end myform –>
<div id=“writeHere” class=“a14B”>
Will write here</div>
<!-- end writeHere –>

</body>

</html>