PDA

View Full Version : 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.




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
<!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
<!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.


<!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"?

Tedah3143
01-16-2010, 10:03 AM
Well vwphillips, I guess I was hoping some of your genius would rub off on me...Maybe you'll understand after I've explaned that I guess maybe it's not resolved...I've got a somewhat comprehensive Country List/Menu I'd like to use to replace the initial rudimentary Country list with. It shows "United States of America" as opposed to "U.S.A" while England is still "England". I can't seem to extrapolate the call to "U.S.A." or "England" in order to transfer the textboxes. Might you have constructive critical thought and or direction on the matter?

vwphillips
01-16-2010, 10:37 AM
please post your comprehensive Country List/Menu

Tedah3143
01-16-2010, 10:40 AM
might you give me a few minutes. i'll have to revise it. it was a little too long for the DD editor. Dost' thow have some tea or a beer?

Tedah3143
01-16-2010, 10:52 AM
Here's a watered down version:


<select name="PPA Holders Dwelling Country" class="textfieldrequiredstate" id="PPA Holders Dwelling Country" onchange="Show(this);" >
<option selected="selected">Select One</option>
<option value="Canada">Canada</option>
<option value="East Timor (Timor-Leste">East Timor(Timor-Leste)</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Slavador</option>
<option value="England">England</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Greece">Greece</option>
<option value="Grenada">Grenada</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonnesia</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya ">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea, North">Korea, North</option>
<option value="Korea, South">Korea, South</option>
<option value="Kosovo">Kosovo</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrqyzstan">Kyrqyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Mexico">Mexico</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montenegro">Montenegro</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Mayanmar (Burma)">Mayanmar (Burma)</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Pricipe">Sao Tome And Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tjikistan</option>
<option value="Tanzania">Tanania</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States of America">United States of America</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City (Holy See)">Vatican City (Holy See)</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>

vwphillips
01-16-2010, 04:04 PM
if there that many options there will be many variations of Phone Number/Post Code formats and associated text it may be worth considering auto formatting the numbers using a code like


<!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 ShowMe(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>

<script language="JavaScript" type="text/javascript" >
<!--
// Format Number
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Format a number such as a phone number as required.

// Options to verify each input 'onblur'
// There may be as many applications on a page as required.

// Application Notes

// **** Introduction
//
// The format is specified as a string
// and passed to the function 'f20FormatNumber()' on the onkeyup event of a text box
// e.g.
// '(~~~) ~~~~~~'
// The sting charactors '~' will be replaced by the numbers typed in the text box



// **** General
//
// There can be any number of applications on a page each with a unique format
//
// Tested with IE6, Mozilla FireFox and Safari


// Functional Code - NO NEED to Change

function zxcFormatNumber(o){
this.obj=o.object;
this.format=o.format;
this.tcol=o.TypingColor||'#000000';
this.ccol=o.CompleteColor||this.tcol;
this.wcol=o.WarningColor||this.tcol;
var oop=this;
this.obj.onkeyup=function(){ oop.Format(); }
if (o.ValidateonBlur){
this.obj.onblur=function(){ oop.Blur(); }
}
}

zxcFormatNumber.prototype.Format=function(){
var value=this.obj.value.replace(/\D/g,''),valuecnt=0,fnu='';
if (this.obj.value.length>0){
for (var z0=0;z0<this.format.length;z0++){
fnu+=(this.format.charAt(z0)=='~')?value.charAt(valuecnt++):this.format.charAt(z0);
if (valuecnt>value.length) break;
}
}
this.obj.style.color=(fnu.length!=this.format.length)?this.tcol:this.ccol;
this.obj.value=fnu;
}

zxcFormatNumber.prototype.Blur=function(){
if (this.obj.value.length!=this.format.length){
this.obj.style.color=this.wcol;
alert('Please Complete '+(this.obj.title||'Field'));
}
}
//-->
</script>
</head>

<body>
<input id="tst" size="15" value="Phone Number" style="color:gray;" ><br>
<input id="tst1" size="15" value="Phone Number" style="color:gray;" ><br>
<p>Country:
<select name="Country" class="textfieldRequiredState" id="Country" onchange="ShowMe(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>
<script type="text/javascript">
/*<![CDATA[*/
new zxcFormatNumber({
object:document.getElementById('tst'),
format:'(~~~) ~~~~~~',
TypingColor:'#000099',
CompleteColor:'#000000',
WarningColor:'FF0000',
ValidateonBlur:true
});

new zxcFormatNumber({
object:document.getElementById('tst1'),
format:'~~~-~~~-~~~',
TypingColor:'#000099',
CompleteColor:'#000000',
WarningColor:'FF0000',
ValidateonBlur:true
});

/*]]>*/
</script>
</body>

</html>

and changing the format according to the selection

Tedah3143
01-17-2010, 02:25 AM
I understand now. The p1 in the JavaScript calls U.S.A. and the p2 calls England. I simply added the countries and then renumerated the p1 to p233 where U.S.A. falls in the list. Thanks.

Tedah3143
01-18-2010, 01:23 AM
Your right about the possibillity of formatting the textboxes. That is something I might do. For the moment, I'm interested in knowing how to make the textboxes appear at a specific Line Number and for there to be the capacity to add fixed additional content AFTER the textboxes appearance point. Will you please help? Thanks.

Tedah3143
01-18-2010, 01:48 AM
The code for the page is too long to post here.

This is the general idea:

COUNTRY (Controls Postcode and Telephone Number)
Name
Address
Apt./Suite Number
City/Town/Locality
State/Province
POSTCODE
TELEPHONE NUMBER
Date of Birth
Male/Female
Marital Status

The POSTCODE and TELEPHONE NUMBER need to be displayed in at a fixed line number after "State/Province" and have the capacity to have textboxes after them. As it is now, they always appear after "Marital Status".

Thanks.

Tedah3143
01-19-2010, 07:12 AM
Is it possible to format the textbox to accept numerous formats for it's contents according to a Country List/Menu Box? I'd probably need at least one sample textbox with input variations on Telephone Numbers and Postcodes in order to understand the Javascript &/or HTML code. Maybe something like:

A textbox capable of displaying the United States' Zip+4 information with the "dash" in it after the fifth digit The capacity to display one or more spaces, much like the dash and include a cursor auto jump over the dash or space and it needs to be alphanumeric yet have the capacity to accept numbers only. It needs to be about 2 inches long. Two might be more in order.

All Caps: "12345-6789 ABC"

Upper/Lower Case: "12345-6789 Abc"


If anyone can help me I sure would appreciate it. The above description is such that I might fully understand how to manipulate the code by virtue of it being presented.



This way I can have fixed Telephone and Postal Textboxes.

Tedah3143
01-19-2010, 07:27 AM
P.S. - That other code will come in very handy once the website is up and running and I can pay more attention to customizing the registration process per each individual country...so...Thanks again vwphillips!

Tedah3143
02-24-2010, 08:23 PM
This issue has been resolved.