Javascript Form Input Retrieval

Why is it that in a form that contains a Text Box and a Submit Button, I can Alert what has been typed in the text box by the user, but can't print it on the page? What am I doing wrong?

Here's the code

<form name="Serb" action="" method="get">
<input name="Name" type="text" size="15" m开发者_Go百科axlength="20" />
<input name="Join" type="submit" value="Join" onClick="serb(this.form)" />

<script type="text/javascript">
    function serb(form){
    var x = document.Serb.Name.value;   
    alert(x); \\this alerts
    document.write(x); \\this should print on page
    }
</script>

For some reason, the alert works fine and displays exactly what the user typed in the username box after pressing 'Join'. However, it won't print the information on the page. Why is that?

---

It does work. The value in the textbox is printed on the page.

BUT:

1. \\ do not mean anything in Javascript. Comments begin with //. This is most likely the reason why you are not seeing the value being written

2. document.write replaces whatever is in the HTML page with its argument. (If it is called after the document is loaded). So unless you are trying to learn Javascript this is not a very good idea.

   Actually it is not a very good idea to use it even when learning Javascript, unless you are trying to learn how document.write works. There are flexible (and better) ways to manipulate the content of a page, starting from the humble getElementById to complex DOM manipulation

---

It is not a good idea to use document.write() after the page has been loaded/parsed. At that point, it will overwrite the page HTML with new content. document.write() is generally used while the page is being loaded to insert content at a particular point into the page as it's being loaded.

If you want to put the value into some item on the page, then you need to use appropriate DOM methods for that, putting the value into an input field, setting the innerHTML on a div, etc...

You can read about document.write here: https://developer.mozilla.org/en/document.write.

Here's an example of fetching the value from the field and putting it in another object on the page without using document.write(): http://jsfiddle.net/jfriend00/dU8Sr/.

HTML:

<form name="Serb" action="" method="get">
<input name="Name" type="text" size="15" maxlength="20" />
<input name="Join" type="button" value="Join" onClick="serb(this.form)" />
</form>
<br>
<br>Output: <span id="output"></span>

Javascript:

function serb(form) {
    var x = document.Serb.Name.value;   
    document.getElementById("output").innerHTML = x;
}