SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Southeast Michigan
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to set default value?

    Im new to javascript, and i want to set a default value for a input box.

    I have a function which uses the .value method to add a value to input field when the document is loaded, but i get an error "document.getElementById("myText") is null ".

    here is the code for what im trying to do.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Learning Javascript</title>
    		<script type="text/javascript" src="js/javascript.js"></script>
        </head>
    <body>
        <input type='text' id='myText' />
    	<input type='button' onclick='EnterText()' value='Form Checker'/>
    	<input type='button' onclick='ClearText()' value='Clear Form' />
    </body>
    </html>

    Code JavaScript:
    window.onload = SetDefaultValue();
     
    function EnterText() {
        myTextField = document.getElementById("myText");
    	if(myTextField.value != ""){
    	    alert("You Entered: " + myTextField.value);
    	}else {
    	    alert("Please enter some text!");
    	    }
    }
     
    function ClearText() {
        ClearTextField = document.getElementById("myText");
    	if (ClearTextField.value > "") {
    	    ClearTextField.value = "";
    	}else {
    	    alert("Please enter some text!");
    	}
    }
     
    function SetDefaultValue() {
        var PopulateField = document.getElementById("myText").value="John Doe";
    }

    its the function SetDefultValue() that's not working right. I'm a total javascript newbie and i could really use some help.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try this

    Code JavaScript:
    window.onload = function(){
        SetDefaultValue();
    };

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The other alternative is to just move the <script> tag to immediately before the </body> tag.

    Doing so would also make the page appear to load faster as the rest of the page content would not be waiting for the script to load. Browsers can't load anything else while loading a script referenced from a <script> tag but modern browsers can load up to eight other files in parallel (older browsers can only manage two).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Southeast Michigan
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works now! Thank you.

    i'm trying to understand why it wasn't working the way i was doing it.

    Why does it work when you SetDefaultValue() function inside of an anonymous function()?

  5. #5
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Before you try to access an element in js, it must either have already been loaded into the browser or created earlier by js. It sounds like your running getElementById before the element exists. Either use window.onload or place your js after the element has been created in the html.

    Another option is to not use js and just give the textbox a value attribute and value in the html.

  6. #6
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The problem with the original script was caused by the onload handler incorrectly including a (). Leave this out and it works.

    window.onload = SetDefaultValue(); /* wrong */
    window.onload = SetDefaultValue; /* correct */

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Southeast Michigan
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks AllanP, ill have to remember that next time.

    Also is there a faster way to run the a javascript function? like after the DOM loads?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by emiljan View Post
    Thanks AllanP, ill have to remember that next time.

    Also is there a faster way to run the a javascript function? like after the DOM loads?
    I'm still trying to understand why are you using scripting to set the default value in the first place?

    Wouldn't this work just as well (instantaneous in fact), without scripting?

    Code html4strict:
    <input type="text" value="John Doe" />
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by emiljan View Post
    Also is there a faster way to run the a javascript function? like after the DOM loads?
    Yes - as I said before - move the script tag to immediately before the </body>.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •