Form Phone number fields

I usually handle this with javascript in "made by scratch" sites however I can't seem to find a good solution for this.

Phone number divided into two fields...one is area code. The other is phone number. When the field is typed into the max char is reached the focus moves to the phone number field to allow the user to type in the phone number seemlessly.

Any idea how to do that with ChronoForms? I'm using the one for Joomla 1.0

Thanks so much! 🙂

Hi PageMasterRWS,

Please show me you old JS and I will tell you how to use it!

Cheers
Max

This is how I would do it if I were creating a "scratch" page. Any ideas would be great! Thanks!

<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
  {
  var next=x.tabIndex;
  if (next<document.getElementById("form1").length)
    {
    document.getElementById("form1").elements[next].focus();
    }
  }
}
</script>
<form>
<table>
<tr>
            <td> </td>
            <td class="style18">Best Contact Phone:</td>
            <td><input name="bestcontactareacode" type="text" id="bestcontactareacode" size="5" maxlength="3" tabindex="3" onkeyup="checkLen(this,this.value)"/>
              -
                <input name="bestcontactphone" type="text" id="bestcontactphone" size="10" maxlength="8" tabindex="4" /></td>
          </tr>
</table>
</form>

good, add the js code piece in the js box without the script tags, and the html code to the html box without the form tags! easy!😉

Cheers
Max

Thanks, I'll give this a try on Monday then I'll let you know. 🙂

Hi PageMasterRWS,

It's not quite as straightforward as Max says - you need to be a little careful about the form name.

Bob

PS Here's a MooTools version - all in the Form HTML tab

<?php
$script = "
window.addEvent('domready', function() {
  var area = $('bestcontactareacode');
  var phone  = $('bestcontactphone');
  area.addEvent('keyup', function(event) {
    if (area.value.length == area.maxLength) {
      phone.focus();
    }
  });
});
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<table>
  <tr>
    <td> </td>
     <td class="style18">Best Contact Phone:</td>
     <td><input name="bestcontactareacode" type="text" id="bestcontactareacode" size="5" maxlength="3" tabindex="3" onkeyup="checkLen(this,this.value)"/>
              -
      <input name="bestcontactphone" type="text" id="bestcontactphone" size="10" maxlength="8" tabindex="4" />
    </td>
  </tr>
</table>

Oh, I missed the form names, Thanks Bob!🙂

Regards
Max