调用Javascript函数处理表单后，HTML表单不打印到浏览器

Question

<script type="text/javascript">

function gr8r( form ) {

document.write( '"' + form.s1.value + '"' );    

if ( form.s1.value > form.s2.value ) 
    document.write( ' is gr8r than ' );
else
    document.write( ' is not gr8r than ' );

document.write( '"' + form.s2.value + '"' );


}

</script>

<form action="" method="post">

<input type="text" name="s1" value="" />
<input type="text" name="s2" value="" />
<br />
<input type="button" value="click" onclick="gr8r(this.form)" />

</form>

The result I expect is javascript to execute after i click on the button and then display html form...but html form isn't displaying afterwards...

Any help very much appreciated, thanks!

The output i want is:

2 is gr8r than 1

<form action="" method="post">

<input type="text" name="s1" value="" />
<input type="text" name="s2" value="" />
<br />
<input type="button" value="click" onclick="gr8r(this.form)" />

</form>

Answer 1

What are you trying to accomplish? Display the text under or above the form? Document.Write will actually override the entire content of the document when it is not run inline during load. So to do what you want to do you need to create a container to put the text into and then place the text in there. So for example :

<div id="message"></div>
<form action="" method="post">

<input type="text" name="s1" value="" />
<input type="text" name="s2" value="" />
<br />
<input type="button" value="click" onclick="gr8r(this.form)" />

</form>

Then the javascript would be :

<script type="text/javascript">

function gr8r( form ) {

message = document.getElementById("message");
msgStr = '"' + form.s1.value + '"';

if ( form.s1.value > form.s2.value ) 
    msgStr += ' is gr8r than ';
else
    msgStr += ' is not gr8r than ';

msgStr += '"' + form.s2.value + '"';

message.innerHTML = msgStr;

}

</script>

A better way to do this would be to use a JavaScript framework called JQuery(http://jquery.com). It provides easy ways to attach event handlers and manipulate contents. Removing inline javascript is good for maintenance.

Answer 2

You could try this:

<script type="text/javascript">
function gr8r( form ) {
    document.getElementById("output").innerHTML = document.getElementById("s1").value;

    if ( document.getElementById("s1").value > document.getElementById("s2").value ) 
        document.getElementById("output").innerHTML += ' is gr8r than ';
    else
        document.getElementById("output").innerHTML += ' is not gr8r than ';

    document.getElementById("output").innerHTML += document.getElementById("s2").value;
}
</script>

<div id="output"></div>
<form action="" method="post">
    <input type="text" id="s1" value="" />
    <input type="text" id="s2" value="" />
    <br />
    <input type="button" value="click" onclick="gr8r(this.form)" />
</form>

The div is used to display the ouput. The div and the fields of the form are both selected by their id.

If you want to be sure that the user does not enter a string, use this javascript:

function gr8r( form ) {
    if (isFinite(document.getElementById("s1").value) && isFinite(document.getElementById("s2").value)) {
        document.getElementById("output").innerHTML = document.getElementById("s1").value;

        if (document.getElementById("s1").value > document.getElementById("s2").value) 
            document.getElementById("output").innerHTML += ' is gr8r than ';
        else
            document.getElementById("output").innerHTML += ' is not gr8r than ';

        document.getElementById("output").innerHTML += document.getElementById("s2").value;
    }
    else {
        document.getElementById("output").innerHTML = "Please enter only floats!";
    }
}