JavaScript - Outputting a line with Document Write

Question

I am trying to output a line with the javascript Document.Write function, however, on Submitting the form, the line just flashes and disappears

any thoughts?

<!DOCTYPE html>    
<html>
    <head>
        <title>Form Validation</title>
    </head>
    <body>

        <script type="text/javascript">
            function checkAge() { 
                var x = document.forms['myForm']['age'].value;
                if(x < 18) {
                    document.write("<p>You are too Young. Form NOT submitted</p>");
                } else {
                    document.write("Form sent successfully");
                }
            }

            function tips() {
                alert("Please enter your Name in the name Box, \nand Your age in the Age box.\nYou have to be Over 18 to submit the form");
            }
        </script>

        <form id="myForm" action="formvalidation.html" onsubmit="checkAge();">    
            Name: <input type="text" name="text" id="name">
            Age: <input type="text" name="age" id="age">
            <input type="submit" value="Submit">
            <input type="button" value="Help" id="hBtn" onclick="tips();">
        </form>
    </body>
</html>

Do not use document.write after the page has loaded. http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — epascarello, Apr 22 '15 at 18:13

Bhavesh G · Answer 1 · 2015-04-22T21:41:32.427

3

You can't use document.write() to print on current page.

Calling document.write() will automatically call document.open() which clears the current document and thus your present content is cleared.

Alternatively you can use an html <div id="result"></div> and change it's value like this,

document.getElementById("result").innerHTML = "Some Text";

edited Apr 22 '15 at 21:41

answered Apr 22 '15 at 18:30

Bhavesh G

2,844
4
35
63

What can I do instead? That is what I dont understand – GDesigns Apr 22 '15 at 18:30

score 0 · Answer 2 · answered Apr 22 '15 at 18:13

0

Return false on the handler to not make the page refresh on submit:

 <form id="myForm" action="formvalidation.html" onsubmit="checkAge();return false;">

answered Apr 22 '15 at 18:13

Dmitry Sadakov

2,080
2
19
31

the page becomes empty and shows just the text - how can i show the text on the page with the form – GDesigns Apr 22 '15 at 18:21

JavaScript - Outputting a line with Document Write

2 Answers2