Javascript Form Input Retrieval

Question

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" maxlength="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?

Nivas is right, check your comment, it begins with \\ instead of // Also, add ending tag for the form </form> — kazinix
– kazinix, Commented Jul 6, 2011 at 4:49

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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

BUT:

\\ do not mean anything in Javascript. Comments begin with //. This is most likely the reason why you are not seeing the value being written
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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 6, 2011 at 4:46

Nivas

18.4k4 gold badges65 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jfriend00 · Accepted Answer · 2011-07-06 07:28:28Z

1

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;
}

edited Jul 6, 2011 at 7:28

answered Jul 6, 2011 at 4:44

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

1 Comment

RobG Over a year ago

Calling document.write when the document is closed doesn't "add to the end of the page". It will first call document.open(), which completely clears the document of all content, so it replaces the content, not appends to it.

Collectives™ on Stack Overflow

Javascript Form Input Retrieval

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related