Dynamically Fill and Format a texfield box based on 2 other filled texfield boxes

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • RelaxoRy
    #1

    Dynamically Fill and Format a texfield box based on 2 other filled texfield boxes

    I have 3 texfield boxes

    1. firstname
    2. lastname
    3. username

    When a person enters in their firstname and lastname, I want the
    username field to fill with firstnameLastin itial.

    Eg. Firstname = Adam, Lastname = Apple, Username = AdamA

    I want to do it dynamically so as they're typing their firstname, it's
    filling in the username field. And when they fill in their lastname,
    it does it, but it would only have to do it for the first letter then
    go out of the loop.

    I don't even know where to start on this one.. onChange is the event?
    :)

    Any help appreciated
    Ryan
    Tags: None
    • Chris Crandell
      #2
      Re: Dynamically Fill and Format a texfield box based on 2 other filled texfield boxes


      RelaxoRy <relaxory@postm aster.co.uk> wrote in message
      news:3ba42c06.0 402250747.13335 888@posting.goo gle.com...[color=blue]
      > I have 3 texfield boxes
      >
      > 1. firstname
      > 2. lastname
      > 3. username
      >
      > When a person enters in their firstname and lastname, I want the
      > username field to fill with firstnameLastin itial.
      >
      > Eg. Firstname = Adam, Lastname = Apple, Username = AdamA
      >
      > I want to do it dynamically so as they're typing their firstname, it's
      > filling in the username field. And when they fill in their lastname,
      > it does it, but it would only have to do it for the first letter then
      > go out of the loop.
      >
      > I don't even know where to start on this one.. onChange is the event?
      > :)
      >
      > Any help appreciated
      > Ryan[/color]

      Hi Ryan,
      sure sounds like this one has been done before somewhere.

      The onchange version works when you're finsihed with a field and
      could be as simple as

      <form name="myform">
      <table cols="1" width="200">
      <tr><td>
      First <input type="text" width="20" maxlength="20" value="" name="first"
      onchange="myfor m.full.value=my form.first.valu e+' '+myform.last.v alue;"
      />
      </td></tr>
      <tr><td>
      Last <input type="text" width="20" maxlength="20" value="" name="last"
      onchange="myfor m.full.value=my form.first.valu e+' '+myform.last.v alue;"
      />
      </td></tr>
      <tr><td>
      Full <input type="text" width="4" maxlength="40" value="" name="full"
      READONLY />
      </td></tr>
      </table>
      </form>

      The more dynamic version may be a bit more involved and
      will probably use HTMLElement.onk eypress for starters.
      No example at this time.

      Chris


        Comment

        • Geoff Tucker
          #3
          Re: Dynamically Fill and Format a texfield box based on 2 other filled texfield boxes


          "RelaxoRy" <relaxory@postm aster.co.uk> wrote in message
          news:3ba42c06.0 402250747.13335 888@posting.goo gle.com...[color=blue]
          > I have 3 texfield boxes
          >
          > 1. firstname
          > 2. lastname
          > 3. username
          >
          > When a person enters in their firstname and lastname, I want the
          > username field to fill with firstnameLastin itial.
          >
          > Eg. Firstname = Adam, Lastname = Apple, Username = AdamA
          >
          > I want to do it dynamically so as they're typing their firstname, it's
          > filling in the username field. And when they fill in their lastname,
          > it does it, but it would only have to do it for the first letter then
          > go out of the loop.
          >
          > I don't even know where to start on this one.. onChange is the event?
          > :)
          >
          > Any help appreciated
          > Ryan[/color]

          How about this idea - using 'onkeyup'...

          <html>
          <head>
          <title></title>
          <head>
          <script type="text/javascript">

          function yourUserName()
          {
          var first = document.forms['myForm'].elements['firstname'];
          var last = document.forms['myForm'].elements['lastname'];
          var user = document.forms['myForm'].elements['username'];

          user.value = first.value + last.value.char At(0);
          }

          </script>
          </head>
          <body>
          <form name="myForm">

          <input type="text" name="firstname "
          onkeyup="this.f orm.username.va lue=this.value" >
          <input type="text" name="lastname" onkeyup="yourUs erName()">
          <input type="text" name="username" >

          </form>
          </body>
          </html>

          --
          Geoff


            Comment

            Previous template Next
            Working...