Javascript document.write

January 10th, 2006, 7:27 pm

I'm writing a form in which when a user presses the "set" button it runs a check. Based on the check the button would either fail and print out a message on the page or go to the page the form was submitted to. Problem is this.

I'm running the check javascript function like so..

Code: [ Download ] [ Select ]

onclick="return valid('DTV')"

The javscript was as follows:

Code: [ Download ] [ Select ]

     <!--
     function valid(formname){
     document.write('<span class="error">You typed an incorrect value in the '+formname+' field. Please fix before proceeding!</span>');
     return false;
     }
     //-->

1.      <!--
2.      function valid(formname){
3.      document.write('<span class="error">You typed an incorrect value in the '+formname+' field. Please fix before proceeding!</span>');
4.      return false;
5.      }
6.      //-->

What I thought that would do is print the error message where the script was placed in the code and return the form to false so that it wouldn't continue. However it seems to print the message on a newly opened page in both IE and Firefox. Anyone have any ideas?

January 10th, 2006, 7:33 pm

In your page, place the following where you want the error to display:

Code: [ Download ] [ Select ]

<span id="errSpan" class="error">&nbsp;</span>

Then change your function to:

Code: [ Download ] [ Select ]

function valid(formname){
  var errSpan = document.getElementById('errSpan');
  errSpan.replaceChild(document.createTextNode('You typed an incorrect value in the ' + formname + ' field. Please fix before proceeding!'), errSpan.firstChild);
  return false;
}

1. function valid(formname){
2.   var errSpan = document.getElementById('errSpan');
3.   errSpan.replaceChild(document.createTextNode('You typed an incorrect value in the ' + formname + ' field. Please fix before proceeding!'), errSpan.firstChild);
4.   return false;
5. }

Calling document.write after a page has finished rendering will clear the contents of the page before rendering the new text.

January 10th, 2006, 7:41 pm

It's still not printing.. and it won't return false either. I've even run the function as just this:

Code: [ Download ] [ Select ]

return false;

and the form still goes to the page the data would be sent to. I imagine it'll print as soon as it stops going to the next page.

January 10th, 2006, 7:44 pm

Are you using a "type=submit" button or a "type=button" button?

January 10th, 2006, 7:51 pm

type=submit, sorry I thought I had that in the original post.

I tested it with button.. and I got an inavlid argument on the errSpan.replace child line.

January 10th, 2006, 7:57 pm

Do you have the "&nbsp;" in the span? I forgot that initially and edited my post.

January 10th, 2006, 8:04 pm

Nope I didn't have it in there, and now it works!

Now I guess I'll just use the:

Code: [ Download ] [ Select ]

document.Form1.submit();

method to submit my forums. I was thinking that by using a submit button I could get by that.. but guess now. Would I even need to use "return valid('')" or could I just use "valid('')"?

January 10th, 2006, 8:10 pm

If you stick with "type=button" you don't need the return value. It doesn't do anything. You can still use "type=submit" if you want. However, instead of having

Code: [ Download ] [ Select ]

onclick="return valid('DTV')"

in the button, use

Code: [ Download ] [ Select ]

onsubmit="return valid('DTV')"

in the <form> tag. Then, if you return false, the form won't submit.

January 10th, 2006, 8:19 pm

so if I were to try and clear the message and restore it to the "&nbsp;" based on focusing on the text field in that form. How would I go about doing that?

Code: [ Download ] [ Select ]

     function clear(){
     var errSpan = document.getElementById('errSpan');
     errSpan.replaceChild(document.createTextNode('&nbsp;'), errSpan.firstChild);
     }

1.      function clear(){
2.      var errSpan = document.getElementById('errSpan');
3.      errSpan.replaceChild(document.createTextNode('&nbsp;'), errSpan.firstChild);
4.      }

?

January 10th, 2006, 11:01 pm

I believe that would literally write "&nbsp;". A plain old space should suffice (' ').

January 12th, 2006, 1:42 pm

I've tried the function with both:

Code: [ Download ] [ Select ]

     function clear(){
     var errSpan = document.getElementById('errSpan');
     errSpan.firstChild.nodeValue = " ";
     }

1.      function clear(){
2.      var errSpan = document.getElementById('errSpan');
3.      errSpan.firstChild.nodeValue = " ";
4.      }

and

Code: [ Download ] [ Select ]

     function clear(){
     var errSpan = document.getElementById('errSpan');
     errSpan.replaceChild(document.createTextNode(' '), errSpan.firstChild);
     }

1.      function clear(){
2.      var errSpan = document.getElementById('errSpan');
3.      errSpan.replaceChild(document.createTextNode(' '), errSpan.firstChild);
4.      }

neither of them will erase the message. I've looked into child objects and I can't figure out why neither of these methods work. I'm calling the function with the input box like so:

Code: [ Download ] [ Select ]

<input type="text" width="125" size="20" name="text" onfocus="clear()" />

January 12th, 2006, 2:37 pm

You need to change the name of your "clear" function to something else. I think it's conflicting with a native function.

January 12th, 2006, 2:51 pm

Thanks that did the trick!

January 12th, 2006, 3:58 pm

Ok one final question and that should do it. Can anyone point out the problem with this?

Code: [ Download ] [ Select ]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript">
function valid(formname){
    if (formname == "DTV Only VSD %"){
        var textinputvalue = document.DTVonly.text.value;
        var IsItANumber = IsNumber(textinputvalue);
        if (IsItANumber == "Yes"){
            if (textinputvalue < 30 || textinputvalue > 100){
                var errSpan = document.getElementById('errSpan');
                errSpan.replaceChild(document.createTextNode('The value you typed in the '+formname+' can not be accepted. The value must be between 30 and 100!'), errSpan.firstChild);
                return false;
            } else {
                return true;
            }
        } else {
            alert('No that is not a number!')
            return false;
        }
}
}
function IsNumber(inputvalue){
    if (isNaN(inputvalue)) {
        var errSpan = document.getElementById('errSpan');
        errSpan.replaceChild(document.createTextNode('The value you typed in the '+formname+' field is not a number.'), errSpan.firstChild);
        return "No";
    } else {
        return "Yes";
    }
}
function clearError(){
    var errSpan = document.getElementById('errSpan');
    errSpan.replaceChild(document.createTextNode(' '), errSpan.firstChild);
}
</script>
</head>
<body>
<form action="thisfile.html" method="post" enctype="text/plain" name="DTVonly" class="removespace" onsubmit="return valid('DTV Only VSD %')">
<input type="text" width="125" size="20" name="text" onfocus="clearError()" /><br/>
<input type="submit" value="Set" name="submit" />
</form>
</body>
</html>

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title>Untitled Document</title>
5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6. <script language="javascript" type="text/javascript">
7. function valid(formname){
8.     if (formname == "DTV Only VSD %"){
9.         var textinputvalue = document.DTVonly.text.value;
10.         var IsItANumber = IsNumber(textinputvalue);
11.         if (IsItANumber == "Yes"){
12.             if (textinputvalue < 30 || textinputvalue > 100){
13.                 var errSpan = document.getElementById('errSpan');
14.                 errSpan.replaceChild(document.createTextNode('The value you typed in the '+formname+' can not be accepted. The value must be between 30 and 100!'), errSpan.firstChild);
15.                 return false;
16.             } else {
17.                 return true;
18.             }
19.         } else {
20.             alert('No that is not a number!')
21.             return false;
22.         }
23. }
24. }
25. function IsNumber(inputvalue){
26.     if (isNaN(inputvalue)) {
27.         var errSpan = document.getElementById('errSpan');
28.         errSpan.replaceChild(document.createTextNode('The value you typed in the '+formname+' field is not a number.'), errSpan.firstChild);
29.         return "No";
30.     } else {
31.         return "Yes";
32.     }
33. }
34. function clearError(){
35.     var errSpan = document.getElementById('errSpan');
36.     errSpan.replaceChild(document.createTextNode(' '), errSpan.firstChild);
37. }
38. </script>
39. </head>
40. <body>
41. <form action="thisfile.html" method="post" enctype="text/plain" name="DTVonly" class="removespace" onsubmit="return valid('DTV Only VSD %')">
42. <input type="text" width="125" size="20" name="text" onfocus="clearError()" /><br/>
43. <input type="submit" value="Set" name="submit" />
44. </form>
45. </body>
46. </html>

I've gone through and tested all the parts together.. and they seemed to work fine. It's when I seperated the IsNumber function into it's own function that I seemed to have problems. Any help would be appreciated.

January 12th, 2006, 5:08 pm

You're missing the closing bracket to match:

Code: [ Download ] [ Select ]

if (formname == "DTV Only VSD %"){