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?

Improve company productivity with a Business Account.Sign Up

x
 
cLFlaVAConnect With a Mentor Commented:
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
 
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
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.