Javascript document.write

Post 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?
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 10th, 2006, 7:27 pm

  • PsyckBoy
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jun 20, 2005
  • Posts: 204
  • Loc: SoCal
  • Status: Offline

Post 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.

Post 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.
  • PsyckBoy
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jun 20, 2005
  • Posts: 204
  • Loc: SoCal
  • Status: Offline

Post January 10th, 2006, 7:44 pm

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

Post 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.
  • PsyckBoy
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jun 20, 2005
  • Posts: 204
  • Loc: SoCal
  • Status: Offline

Post January 10th, 2006, 7:57 pm

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

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('')"?
  • PsyckBoy
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jun 20, 2005
  • Posts: 204
  • Loc: SoCal
  • Status: Offline

Post 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.

Post 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.      }

?
  • PsyckBoy
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jun 20, 2005
  • Posts: 204
  • Loc: SoCal
  • Status: Offline

Post January 10th, 2006, 11:01 pm

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

Post 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()" />
  • PsyckBoy
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jun 20, 2005
  • Posts: 204
  • Loc: SoCal
  • Status: Offline

Post 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.

Post January 12th, 2006, 2:51 pm

Thanks that did the trick!

Post 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.
  • PsyckBoy
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jun 20, 2005
  • Posts: 204
  • Loc: SoCal
  • Status: Offline

Post January 12th, 2006, 5:08 pm

You're missing the closing bracket to match:
Code: [ Download ] [ Select ]
if (formname == "DTV Only VSD %"){
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 12th, 2006, 5:08 pm

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 342 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© Unmelted Enterprises 1998-2009. Driven by phpBB © 2001-2009 phpBB Group.