List/Menu used in conjunction with Textbox

**Tedah3143** · 01-12-2010, 10:29 PM

I am seeking to have a List Menu w/Country Names in that when a country is selected, the appropriate Textboxes appear allowing for the proper protocol per country, thereby causing a greater chance for accuracy. The code will be used for user entry of telephone numbers and postal code information by displaying the precise number of fields and limiting their digits.

If anyone out there will help, it would be appreciated by myself and probably by others as I have scoured the internet for a solution to no avail as of yet.

It probably needs some JavaScript. Please Help. Thanks.

Code:

Country:
  <select name="Country" class="textfieldRequiredState" id="Country">
    <option selected="selected">Select One</option>
    <option value="U.S.A.">U.S.A.</option>
    <option value="England">England</option>
  </select>
</p>
<p>
  <input name="USA Area Code" type="text" id="USA Area Code" maxlength="3" width="35" minlength="3" size="1" />
-
<input name="USA Prefix" type="text" id="USA Prefix" minlength="3" maxlength="3" width="35" size="1" />
-
<input name="USA Line Number" type="text" id="USA Line Number" minlength="4" maxlength="4" width="35" size="1" /> 
(U.S.A.: 3-3-4 Digits)
</p>
<p>
  <input name="England Area Code" type="text" id="England Area Code" maxlength="4" width="35" size="1" />
-
<input name="England 1" type="text" id="England 1" maxlength="3" width="35" size="1" />
-
<input name="England 2" type="text" id="England 2" maxlength="3" width="35" size="1" /> 
(England: Up to 4 then 3-3 Digits)
</p>
<p>If option value is &quot;U.S.A.&quot; then display Textfield &quot;USA Area Code&quot;, Textfield &quot;USA Prefix&quot;, Textfield &quot;USA Line Number&quot; at &quot;x&quot; &quot;y&quot; coordinates.

**vwphillips** · 01-13-2010, 11:23 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.hide {
  display:none;
}

/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/

function Show(sel){
 var obj=document.getElementById('p'+sel.selectedIndex);
 if (this.obj){
  this.obj.style.display='none';
 }
 if (obj){
  this.obj=obj;
  obj.style.display='block';
 }
}
/*]]>*/
</script></head>

<body>
Country:
  <select name="Country" class="textfieldRequiredState" id="Country" onchange="Show(this);" >
    <option selected="selected">Select One</option>
    <option value="U.S.A.">U.S.A.</option>
    <option value="England">England</option>
  </select>
</p>
<p id="p1" class="hide" >
  <input name="USA Area Code" type="text" id="USA Area Code" maxlength="3" width="35" minlength="3" size="1" />
-
<input name="USA Prefix" type="text" id="USA Prefix" minlength="3" maxlength="3" width="35" size="1" />
-
<input name="USA Line Number" type="text" id="USA Line Number" minlength="4" maxlength="4" width="35" size="1" />
(U.S.A.: 3-3-4 Digits)
</p>
<p id="p2" class="hide">
  <input name="England Area Code" type="text" id="England Area Code" maxlength="4" width="35" size="1" />
-
<input name="England 1" type="text" id="England 1" maxlength="3" width="35" size="1" />
-
<input name="England 2" type="text" id="England 2" maxlength="3" width="35" size="1" />
(England: Up to 4 then 3-3 Digits)
</p>

</body>

</html>

**Tedah3143** · 01-13-2010, 10:37 PM

Thank you very much for utilizing your expertise to help me with this. It works great. There is one more thing I'd like the code to do. I'd like to have the capacity to place the Textboxes at a specific location on the page so that the Country box might be in the middle of the page and the Telephone number textboxes might be positioned near the bottom of the page when they appear. Please Help! Thanks.

**vwphillips** · 01-14-2010, 08:58 AM

simply rearrange the two <p>'s at the bottom of the page

**Tedah3143** · 01-14-2010, 12:04 PM

Please forgive my ignorance. I don't understand. Will you please elaborate.

**Tedah3143** · 01-14-2010, 12:21 PM

Might you provide a copy of the code that has the Telephone Textboxes displayed at a different location and I can compare the two? Thanks.

**vwphillips** · 01-14-2010, 02:41 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.hide {
  display:none;
}

/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/

function Show(sel){
 var obj=document.getElementById('p'+sel.selectedIndex);
 if (this.obj){
  this.obj.style.display='none';
 }
 if (obj){
  this.obj=obj;
  obj.style.display='block';
 }
}
/*]]>*/
</script></head>

<body>
<p>Country:
  <select name="Country" class="textfieldRequiredState" id="Country" onchange="Show(this);" >
    <option selected="selected">Select One</option>
    <option value="U.S.A.">U.S.A.</option>
    <option value="England">England</option>
  </select>
</p>

<p>
additional content<br />
additional content<br />
additional content<br />
additional content<br />
additional content<br />
additional content<br />
additional content<br />
additional content<br />
additional content<br />
</p>

<p id="p1" class="hide" >
  <input name="USA Area Code" type="text" id="USA Area Code" maxlength="3" width="35" minlength="3" size="1" />
-
<input name="USA Prefix" type="text" id="USA Prefix" minlength="3" maxlength="3" width="35" size="1" />
-
<input name="USA Line Number" type="text" id="USA Line Number" minlength="4" maxlength="4" width="35" size="1" />
(U.S.A.: 3-3-4 Digits)
</p>
<p id="p2" class="hide">
  <input name="England Area Code" type="text" id="England Area Code" maxlength="4" width="35" size="1" />
-
<input name="England 1" type="text" id="England 1" maxlength="3" width="35" size="1" />
-
<input name="England 2" type="text" id="England 2" maxlength="3" width="35" size="1" />
(England: Up to 4 then 3-3 Digits)
</p>

</body>

</html>

**Tedah3143** · 01-14-2010, 08:36 PM

Thanks. Now I understand. There's one more issue I'm having. To round out this snippet, it needs to display a Postal Code Textbox along with the commensurate country's Telephone Number Textboxe(s). Below is the code for some of the Postal Code textboxes the U.S. and England.

U.S. Zip Code:
<input name="U S Postal Code" type="text" id="U S Postal Code" minlength="5" maxlength="5" width="70" size="1" />
+
<input name="U S Postal Code plus 4" type="text" id="U S Postal Code plus 4" Minlength="4" maxlength="4" width="50" size="1" />
</p>
<p> England Postal Code:
<input name="England Postal Code" type="text" id="England Postal Code" size="3" maxlength="7" width="70" Minlength="7"/>

**Tedah3143** · 01-15-2010, 03:42 AM

Well, I discovered the answer to my own question. I simply insterted the Postal Code textbox(es) code after the corrosponding country's Telephone Textbox(es). Here's the code.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.hide {
  display:none;
}

/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/

function Show(sel){
 var obj=document.getElementById('p'+sel.selectedIndex);
 if (this.obj){
  this.obj.style.display='none';
 }
 if (obj){
  this.obj=obj;
  obj.style.display='block';
 }
}
/*]]>*/
</script></head>

<body>
<p>Country:
  <select name="Country" class="textfieldRequiredState" id="Country" onchange="Show(this);" >
    <option selected="selected">Select One</option>
    <option value="U.S.A.">U.S.A.</option>
    <option value="England">England</option>
  </select>
</p>

<p>
additional content<br />
additional content<br />
additional content<br />
additional content<br />
additional content<br />
additional content<br />
additional content<br />
additional content<br />
additional content<br />
</p>

<p id="p1" class="hide" >
  <input name="USA Area Code" type="text" id="USA Area Code" maxlength="3" width="35" minlength="3" size="1" />
-
<input name="USA Prefix" type="text" id="USA Prefix" minlength="3" maxlength="3" width="35" size="1" />
-
<input name="USA Line Number" type="text" id="USA Line Number" minlength="4" maxlength="4" width="35" size="1" />
(U.S.A.: 3-3-4 Digits) U.S. Zip Code:
  <input name="U S Postal Code" type="text" id="U S Postal Code" minlength="5" maxlength="5" width="70" size="1" /> 
  +
  <input name="U S Postal Code plus 4" type="text" id="U S Postal Code plus 4" Minlength="4" maxlength="4" width="50" size="1" />

</p>
<p id="p2" class="hide">
  <input name="England Area Code" type="text" id="England Area Code" maxlength="4" width="35" size="1" />
-
<input name="England 1" type="text" id="England 1" maxlength="3" width="35" size="1" />
-
<input name="England 2" type="text" id="England 2" maxlength="3" width="35" size="1" />
(England: Up to 4 then 3-3 Digits)  England Postal Code:
  <input name="England Postal Code" type="text" id="England Postal Code" size="3" maxlength="7" width="70" Minlength="7"/>

</p>

</body>

</html>

Thanks so very much to vwphillips for his expertise and willingness to help. God Bless.

**Tedah3143** · 01-15-2010, 06:09 AM

This is my first time to use such a forum. vwphillips is a genius. How do I tag this issue as "Resolved"?

Thread: List/Menu used in conjunction with Textbox

Thread Tools

Search Thread

List/Menu used in conjunction with Textbox

Bookmarks

Bookmarks

Posting Permissions