SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Update a field when typing in another

    I have this text field for people to type their username

    When someone types their username, I would like another (disabled) text field to dynamically update to show the user a preview of their profile link, which is in the format of "http://site.com/profile/username"

    ie. if user types "funn" in the username field, the profile text field will display "http://site.com/profile/funn/"
    if the user subsequently types a "y" to make "funny", the profile field will update to "http://site.com/profile/funny/"

    Can someone show me how to do this, or direct me to an example?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick and dirty solution which might lead you on the right path:

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Field Update</title>
        <style type="text/css">
          html {font:81.25%/1.5 Verdana,sans-serif}
          label {float:left; width:6em}
          #uname {width:5em}
          #profile {width:20em}
        </style>
      </head>
      <body>
        <form action="">
          <div>
            <label for="uname">Username:</label>
            <input type="text" name="uname" id="uname">
     
            <br><label for="profile">Profile:</label>
            <input type="text" id="profile" readonly>
          </div>
        </form>
        <script type="text/javascript">
          function addListener(element, evt, listener) {
              if (typeof element.addEventListener != "undefined") {
                  element.addEventListener(evt, listener, false);
              } else if (typeof element.attachEvent != "undefined") {
                  element.attachEvent("on" + evt, listener);
              }
          }
     
          addListener(document.getElementById("uname"),
                      "keyup",
                      function(e) {
                          var uname = document.getElementById("uname").value;
                          document.getElementById("profile").value =
                              uname == ""
                              ? ""
                              : "http://site.com/profile/" + uname + "/";
                      });
        </script>
      </body>
    </html>
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an example
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>Text Box Changes</title>
    	<script type="text/javascript">
    		window.onload = function() {
    			var txt = document.getElementById("txt1");
    			txt.onchange = txt.onkeyup = function() {
    				document.getElementById("pTarget").innerHTML = "Prefix:" + this.value;
    			}
    		}
    	</script>
    </head>
    <body>
    <p>Type in the box: <input type="textbox" id="txt1" /></p>
    <p id="pTarget"></p>
    </body>
    </html>
    Hope it helps.


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
  •