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

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
jayjay21usAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

cLFlaVACommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
minichickenCommented:
<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
minichickenCommented:
gees, just went away for a while and now i am second in the thread.... :p
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

jayjay21usAuthor Commented:
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
cLFlaVACommented:
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
cLFlaVACommented:
Additionally, the code I provided worked as-is.  Can't seem to figure out how you couldn't get it to work.
0
minichickenCommented:
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
jayjay21usAuthor Commented:
Still can't get it to work... I'll look around the web for an answer.
0
cLFlaVACommented:
Not sure why you accepted my answer then...

:-/

If you provide your html we'll be able to get you a solution.
0
cLFlaVACommented:
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
minichickenCommented:
speachless :|
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.