HTML / Javascript User Input Display (Refresh the problem)

I am trying to take what a user enters in a textbox, and then write that input to a paragraph on the page, and stop the page refreshing so that they can then copy that input for use elsewhere. (it's going to be a rather longer form, but this is a stumbling block i've hit
--edited for clarity--

All seems to be working well, other than when I enter input and press submit, the input is displaying fine for a couple seconds, then the page refreshes. Is there any way I can fix/stop this?

I have tried adding a while loop to the display for the code to stop when it has displayed, but so far no success.

Any pointers would be appreciated, thank you.

my code

<html>
<head>
<script type="text/javascript">
    function checkForm() {
        var input = document.myForm.username.value;
            document.write.getElementById("display").innerHTML=("Your username is" + " " + input);
            }

    </script>
</head>

<body>

<form name="myForm">
    <input type="text" name="username" value="Enter username" /><br/>
    <input type ="submit" value="Submit"
    onClick="checkForm()" />

</form> 

<span id="display"><p> </p> </span>

</body>
</html>

Your function also needs to return false back to the html form:

function checkForm() {
    var input = document.myForm.username.value;
    document.write.getElementById("display").innerHTML=("Your username is" + " " + input);
    return false;
}

You should probably also be using the onsubmit event of the form itself, instead of onclick on the submit button.

Related Articles