SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onblur copy value in one field to another field

    Hi

    I have a form called "Form1" and I have an input field:
    <input type="text" id="username_input" name="usermame" onblur="Test()">

    When the focus is lost on the above field, I would like to copy the value of this field to
    this field here:
    <input type="text" name="username2">


    I wrote a function called:
    Test()
    and have tried a couple of ways to copy the data from one field to another but it's not working.

    Can someone help me out pls?

    Kath

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    bit quick and dirty, but this should do what you want:

    HTML Code:
    <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>onblur example</title>
        <script>
          function test(){
            var f1 = document.getElementById("username_input");
            var f2 = document.getElementById("username_input2");
            f2.value = f1.value;
          }
        </script>
      </head>
    
      <body>
        <input type="text" name="usermame" id="username_input" value="Field 1" onblur="test()"><br /><br />
        <input type="text" name="username2" id="username_input2" value="Field 2">
      </body>
    </html>
    Inline JavaScript is not the best practice however, so it might be worth considering using an event listener.

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Just to compare, here's a version using jQuery and an event handler:

    Code JavaScript:
    <!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>
        <meta  http-equiv="Content-Type"  content="text/html;  charset=utf-8"  />
        <title>blur()  example - jQuery</title>
        <script  type="text/javascript"  src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
      </head>
     
      <body>
        <input  type="text"  name="usermame"  id="username_input"  value="Field  1"><br  /><br  />
        <input  type="text"  name="username2"  id="username_input2"  value="Field  2">
     
        <script>
          $(document).ready(function()  {
            $("#username_input").blur(function()  {
              $("#username_input2").val($("#username_input").val());
            });
          });
        </script>
      </body>
    </html>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Here's how it is normally done, in a less quick'n'dirty manner.

    The form has an identifier, and the names of the elements within the form are used to access and manipulate them.

    HTML Code:
    <form id="form1" method="..." action="...">
        <p><label>Username: <input name="username"></label></p>
        <p><label>Username 2: <input name="username2"></label></p>
    </form>
    And the script is placed at the end of the body:

    Code javascript:
    var form = document.getElementById('form1');
    form.elements.username.onblur = function () {
        var form = this.form;
        form.elements.username2.value = form.elements.username.value;
    };
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •