Solved

How to Automatically add a Hyphen to number in a text field

Posted on 2004-10-25
2,200 Views
Last Modified: 2008-03-06
I have a form in Frontpage.. I have a field [AccountNo],an account number is always 10 digits long and should be formatted as ####-######;  I want the field to automatically put the hyphen in when the user leaves the field.

 I know I could just add two fields..But I would rather have the hyphen show automatically.. Is there an easy way to do this?

Thanks
0
Question by:jayjay21us
    11 Comments
     
    LVL 13

    Accepted Solution

    by:
    Like this?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <title>new document</title>

    <script language="javascript" type="text/javascript">
    <!--

    function addHyphen() {
        var t = document.forms['the_form'].elements['the_text'];
          if (t.value.length > 0) {
            t.value = t.value.substring(0,4) + "-" + t.value.substring(4, t.value.length);
          }
    }

    -->
    </script>

    <style type="text/css">

    </style>

    </head>

    <body>

    <form name="the_form">
    <input name="the_text" type="text" onblur="addHyphen()">
    <input type="submit">
    </form>

    </body>

    </html>
    0
     
    LVL 12

    Expert Comment

    by:minichicken
    <script language="javascript">
    function addhyphen()
    {
          str = form1.textfield.value;
          str = str.substring(0,4) + "-" + str.substring(4,str.length);
          form1.textfield.value = str;
    }
    </script>
    <form name = "form1">
    <input type="text" name="textfield" onChange="addhyphen();">
    </form>
    0
     
    LVL 12

    Expert Comment

    by:minichicken
    gees, just went away for a while and now i am second in the thread.... :p
    0
     

    Author Comment

    by:jayjay21us
    Can't get either one to work... I thought the second was a little easier..
    This is what I got

    function addHyphen() {
        str = foc-helpfeedback.AccountNo.value;
         str = str.substring(0,4) + "-" + str.substring(4,str.length);
         form1.AccountNo.value = str;
         }

    <input type="text" name="AccountNo" size="10" onChange="addHyphen()" ; maxlength="11" tabindex="1" tabindex="1" />

    What did I miss?
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    First of all, the second one does the exact same thing as the first one.
    Second of all, if "foc-helpfeedback" is the name of a form, I suggest you change it.  Hyphens aren't really good practice in naming elements.

    Third of all, change your code to this:

    function addHyphen() {
        var str = document.forms['foc-helpfeedback'].elements['AccountNo'].value;
        str = str.substring(0,4) + "-" + str.substring(4,str.length);
        document.forms['foc-helpfeedback'].elements['AccountNo'].value = str;
    }

    However, this will append a hyphen even if the value is blank.
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    Additionally, the code I provided worked as-is.  Can't seem to figure out how you couldn't get it to work.
    0
     
    LVL 12

    Expert Comment

    by:minichicken
    Hmm, strange that mine didnt work for you, i tested mine.
    Anyway, I changed it abit, it checks if it already has a hyphen it won't insert the hyphen again

    ******************************************

    <script language="javascript">
    function addhyphen()
    {
               str = form1.AccountNo.value;
          
          if (str.substring(4,5) != "-")
          {    
                str = str.substring(0,4) + "-" + str.substring(4,str.length);
          }
               form1.AccountNo.value = str;
    }
    </script>
    <form name = "form1">
    <input type="text" name="AccountNo" size="20" maxlength="11" tabindex="1" tabindex="1" />
    <input name = "button" type ="button" value = "add hyphen"  onclick="addhyphen();">

    </form>
    0
     

    Author Comment

    by:jayjay21us
    Still can't get it to work... I'll look around the web for an answer.
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    Not sure why you accepted my answer then...

    :-/

    If you provide your html we'll be able to get you a solution.
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    Also not sure why you gave a grade of "c".  Both solutions provided to you are functional when used as-is.  You did not provide enough data for a meaningful answer.
    0
     
    LVL 12

    Expert Comment

    by:minichicken
    speachless :|
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    884 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now