Tagged with "select" http://www.addedbytes.com/feeds/tag-feed/ en Web Development in Brighton - Added Bytes 2006 120 "Select All" JavaScript for Forms Posting to an Array http://www.addedbytes.com/blog/code/select-all-javascript-for-forms-posting-to-an-array/ The problem that led to this snippet of code was that when posting from a form to a PHP script, you may sometimes want to have several fields with the same name and different values. For example, you might want people to be able to tick boxes to indicate which cities they have been to from a list.

The problem that led to this snippet of code was that when posting from a form to a PHP script, you may sometimes want to have several fields with the same name and different values. For example, you might want people to be able to tick boxes to indicate which cities they have been to from a list. You would normally add "[]" to the name of the field inputs, like so:

<input type="checkbox" name="cities[]" value="London"> London
<input type="checkbox" name="cities[]" value="Paris"> Paris
<input type="checkbox" name="cities[]" value="Berlin"> Berlin
<input type="checkbox" name="cities[]" value="Madrid"> Madrid
<input type="checkbox" name="cities[]" value="Rome"> Rome

When the form is received by PHP, whichever items are ticked in the cities list above are accessible in the array $_POST['cities']. This is very handy.

Unfortunately, the addition of square brackets causes trouble with JavaScript, especially with a "Select All" function - which allows you to check all boxes at once by clicking a single one. This script works around that using regular expressions.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Checkbox Fun</title>
<script type="text/javascript"><!--
 
var formblock;
var forminputs;
 
function prepare() {
  formblock= document.getElementById('form_id');
  forminputs = formblock.getElementsByTagName('input');
}
 
function select_all(name, value) {
  for (i = 0; i < forminputs.length; i++) {
    // regex here to check name attribute
    var regex = new RegExp(name, "i");
    if (regex.test(forminputs[i].getAttribute('name'))) {
      if (value == '1') {
        forminputs[i].checked = true;
      } else {
        forminputs[i].checked = false;
  }
    }
  }
}
 
if (window.addEventListener) {
  window.addEventListener("load", prepare, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", prepare)
} else if (document.getElementById) {
  window.onload = prepare;
}
 
//--></script>
</head>
 
<body>
 
<form id="form_id" name="myform" method="get" action="search.php">
 
  <a href="#" onClick="select_all('area', '1');">Check All Fruit</a> | <a href="#" onClick="select_all('area', '0');">Uncheck All 
Fruit</a><br><br>
 
  <input type="checkbox" name="area[]" value="1" />Apples<br />
  <input type="checkbox" name="area[]" value="2" />Bananas<br />
  <input type="checkbox" name="area[]" value="3" />Chickens<br />
  <input type="checkbox" name="area[]" value="4" />Stoats
 
  <br><br><a href="#" onClick="select_all('location', '1');">Check All Locations</a> | <a href="#" onClick="select_all('location', 
'0');">Uncheck All Locations</a><br><br>
 
  <input type="checkbox" name="location[]" value="1" />Brighton<br />
  <input type="checkbox" name="location[]" value="2" />Hove<br />
 
</form>
 
</body>
</html>


]]> Thu, 28 Jul 2005 10:05:00 +0100 http://www.addedbytes.com/blog/code/select-all-javascript-for-forms-posting-to-an-array/ Dave Child ,,,,,,,, US States Select Box http://www.addedbytes.com/blog/code/us-states-select-box/ This states select list was last updated on the 15th March 2004, and should be accurate for that date (and I should imagine, far beyond). If you spot any inaccuracies, please let me know.

This list is provided for you to use as you see fit, but please do not reproduce it elsewhere without creditting this site.

The list comes in two versions. The first is a list without the two-letter codes for each state, the second with the two letter codes.

Without State Abbreviation Codes

<select name="state"> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <option>California</option> <option>Colorado</option> <option>Connecticut</option> <option>Delaware</option> <option>Florida</option> <option>Georgia</option> <option>Hawaii</option> <option>Idaho</option> <option>Illinois</option> <option>Indiana</option> <option>Iowa</option> <option>Kansas</option> <option>Kentucky</option> <option>Louisiana</option> <option>Maine</option> <option>Maryland</option> <option>Massachusetts</option> <option>Michigan</option> <option>Minnesota</option> <option>Mississippi</option> <option>Missouri</option> <option>Montana</option> <option>Nebraska</option> <option>Nevada</option> <option>New Hampshire</option> <option>New Jersey</option> <option>New Mexico</option> <option>New York</option> <option>North Carolina</option> <option>North Dakota</option> <option>Ohio</option> <option>Oklahoma</option> <option>Oregon</option> <option>Pennsylvania</option> <option>Rhode Island</option> <option>South Carolina</option> <option>South Dakota</option> <option>Tennessee</option> <option>Texas</option> <option>Utah</option> <option>Vermont</option> <option>Virginia</option> <option>Washington</option> <option>West Virginia</option> <option>Wisconsin</option> <option>Wyoming</option> </select>

With State Abbreviation Codes

<select name="state"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select>

This list was compiled from a variety of sources, both online and offline, and no guarantee is made as to its accuracy. Please report any mistakes to dave@addedbytes.com.



]]> Sat, 14 Feb 2004 14:14:00 +0000 http://www.addedbytes.com/blog/code/us-states-select-box/ Dave Child ,,,,,,,,,, Countries Select Box http://www.addedbytes.com/blog/code/countries-select-box/ This countries select list was last updated on the 24th October 2003, and should be accurate for that date. If you spot any inaccuracies, please let me know.

I use these things so often it's scary, and I dread the thought of ever having to compile another from scratch - so here you go. This list is provided for you to use as you see fit, but please do not reproduce it elsewhere without creditting this site.

Update, April 2008: A very kind chap by the name of David Hunter has put together a French version of this list, which is below the English version.

English

<select name="country"> <option>Afghanistan</option> <option>Albania</option> <option>Algeria</option> <option>American Samoa</option> <option>Andorra</option> <option>Angola</option> <option>Anguilla</option> <option>Antarctica</option> <option>Antigua and Barbuda</option> <option>Argentina</option> <option>Armenia</option> <option>Aruba</option> <option>Australia</option> <option>Austria</option> <option>Azerbaijan</option> <option>Bahamas</option> <option>Bahrain</option> <option>Bangladesh</option> <option>Barbados</option> <option>Belarus</option> <option>Belgium</option> <option>Belize</option> <option>Benin</option> <option>Bermuda</option> <option>Bhutan</option> <option>Bolivia</option> <option>Bosnia and Herzegovina</option> <option>Botswana</option> <option>Bouvet Island</option> <option>Brazil</option> <option>British Indian Ocean Territory</option> <option>Brunei Darussalam</option> <option>Bulgaria</option> <option>Burkina Faso</option> <option>Burundi</option> <option>Cambodia</option> <option>Cameroon</option> <option>Canada</option> <option>Cape Verde</option> <option>Cayman Islands</option> <option>Central African Republic</option> <option>Chad</option> <option>Chile</option> <option>China</option> <option>Christmas Island</option> <option>Cocos Islands</option> <option>Colombia</option> <option>Comoros</option> <option>Congo</option> <option>Congo, Democratic Republic of the</option> <option>Cook Islands</option> <option>Costa Rica</option> <option>Cote d'Ivoire</option> <option>Croatia</option> <option>Cuba</option> <option>Cyprus</option> <option>Czech Republic</option> <option>Denmark</option> <option>Djibouti</option> <option>Dominica</option> <option>Dominican Republic</option> <option>Ecuador</option> <option>Egypt</option> <option>El Salvador</option> <option>Equatorial Guinea</option> <option>Eritrea</option> <option>Estonia</option> <option>Ethiopia</option> <option>Falkland Islands</option> <option>Faroe Islands</option> <option>Fiji</option> <option>Finland</option> <option>France</option> <option>French Guiana</option> <option>French Polynesia</option> <option>Gabon</option> <option>Gambia</option> <option>Georgia</option> <option>Germany</option> <option>Ghana</option> <option>Gibraltar</option> <option>Greece</option> <option>Greenland</option> <option>Grenada</option> <option>Guadeloupe</option> <option>Guam</option> <option>Guatemala</option> <option>Guinea</option> <option>Guinea-Bissau</option> <option>Guyana</option> <option>Haiti</option> <option>Heard Island and McDonald Islands</option> <option>Honduras</option> <option>Hong Kong</option> <option>Hungary</option> <option>Iceland</option> <option>India</option> <option>Indonesia</option> <option>Iran</option> <option>Iraq</option> <option>Ireland</option> <option>Israel</option> <option>Italy</option> <option>Jamaica</option> <option>Japan</option> <option>Jordan</option> <option>Kazakhstan</option> <option>Kenya</option> <option>Kiribati</option> <option>Kuwait</option> <option>Kyrgyzstan</option> <option>Laos</option> <option>Latvia</option> <option>Lebanon</option> <option>Lesotho</option> <option>Liberia</option> <option>Libya</option> <option>Liechtenstein</option> <option>Lithuania</option> <option>Luxembourg</option> <option>Macao</option> <option>Madagascar</option> <option>Malawi</option> <option>Malaysia</option> <option>Maldives</option> <option>Mali</option> <option>Malta</option> <option>Marshall Islands</option> <option>Martinique</option> <option>Mauritania</option> <option>Mauritius</option> <option>Mayotte</option> <option>Mexico</option> <option>Micronesia</option> <option>Moldova</option> <option>Monaco</option> <option>Mongolia</option> <option>Montenegro</option> <option>Montserrat</option> <option>Morocco</option> <option>Mozambique</option> <option>Myanmar</option> <option>Namibia</option> <option>Nauru</option> <option>Nepal</option> <option>Netherlands</option> <option>Netherlands Antilles</option> <option>New Caledonia</option> <option>New Zealand</option> <option>Nicaragua</option> <option>Niger</option> <option>Nigeria</option> <option>Norfolk Island</option> <option>North Korea</option> <option>Norway</option> <option>Oman</option> <option>Pakistan</option> <option>Palau</option> <option>Palestinian Territory</option> <option>Panama</option> <option>Papua New Guinea</option> <option>Paraguay</option> <option>Peru</option> <option>Philippines</option> <option>Pitcairn</option> <option>Poland</option> <option>Portugal</option> <option>Puerto Rico</option> <option>Qatar</option> <option>Romania</option> <option>Russian Federation</option> <option>Rwanda</option> <option>Saint Helena</option> <option>Saint Kitts and Nevis</option> <option>Saint Lucia</option> <option>Saint Pierre and Miquelon</option> <option>Saint Vincent and the Grenadines</option> <option>Samoa</option> <option>San Marino</option> <option>Sao Tome and Principe</option> <option>Saudi Arabia</option> <option>Senegal</option> <option>Serbia</option> <option>Seychelles</option> <option>Sierra Leone</option> <option>Singapore</option> <option>Slovakia</option> <option>Slovenia</option> <option>Solomon Islands</option> <option>Somalia</option> <option>South Africa</option> <option>South Georgia</option> <option>South Korea</option> <option>Spain</option> <option>Sri Lanka</option> <option>Sudan</option> <option>Suriname</option> <option>Svalbard and Jan Mayen</option> <option>Swaziland</option> <option>Sweden</option> <option>Switzerland</option> <option>Syrian Arab Republic</option> <option>Taiwan</option> <option>Tajikistan</option> <option>Tanzania</option> <option>Thailand</option> <option>The Former Yugoslav Republic of Macedonia</option> <option>Timor-Leste</option> <option>Togo</option> <option>Tokelau</option> <option>Tonga</option> <option>Trinidad and Tobago</option> <option>Tunisia</option> <option>Turkey</option> <option>Turkmenistan</option> <option>Tuvalu</option> <option>Uganda</option> <option>Ukraine</option> <option>United Arab Emirates</option> <option>United Kingdom</option> <option>United States</option> <option>United States Minor Outlying Islands</option> <option>Uruguay</option> <option>Uzbekistan</option> <option>Vanuatu</option> <option>Vatican City</option> <option>Venezuela</option> <option>Vietnam</option> <option>Virgin Islands, British</option> <option>Virgin Islands, U.S.</option> <option>Wallis and Futuna</option> <option>Western Sahara</option> <option>Yemen</option> <option>Zambia</option> <option>Zimbabwe</option> </select>

French / Français

This select list also includes the WTO 2 letter country codes.

<select name="country"> <option value="AF">Afghanistan</option> <option value="ZA">Afrique du Sud</option> <option value="AL">Albanie</option> <option value="DZ">Algérie</option> <option value="DE">Allemagne</option> <option value="AD">Andorre</option> <option value="AO">Angola</option> <option value="AI">Anguilla</option> <option value="AG">Antigua et Barbuda</option> <option value="AN">Antilles néerlandaises</option> <option value="SA">Arabie saoudite</option> <option value="AR">Argentine</option> <option value="AM">Arménie</option> <option value="AW">Aruba</option> <option value="AU">Australie</option> <option value="AT">Autriche</option> <option value="AZ">Azerbaïdjan</option> <option value="BS">Bahamas</option> <option value="BH">Bahreïn</option> <option value="BD">Bangladesh</option> <option value="BB">Barbade</option> <option value="BE">Belgique</option> <option value="BM">Bermudes</option> <option value="BT">Bhoutan</option> <option value="BY">Biélorussie</option> <option value="BO">Bolivie</option> <option value="BA">Bosnie et Herzégovine</option> <option value="BW">Botswana</option> <option value="BN">Brunei Darussalam</option> <option value="BR">Brésil</option> <option value="BG">Bulgarie</option> <option value="BF">Burkina Faso</option> <option value="BI">Burundi</option> <option value="BZ">Bélize</option> <option value="BJ">Bénin</option> <option value="KH">Cambodge</option> <option value="CM">Cameroun</option> <option value="CA">Canada</option> <option value="CV">Cap-Vert</option> <option value="CF">Centrafrique</option> <option value="CL">Chili</option> <option value="CN">Chine</option> <option value="CY">Chypre</option> <option value="CO">Colombiae</option> <option value="KM">Comores</option> <option value="CG">Congo</option> <option value="KR">Corée du Nord</option> <option value="KP">Corée du Sud</option> <option value="CR">Costa Rica</option> <option value="HR">Croatie</option> <option value="CU">Cuba</option> <option value="CI">Côte d'Ivoire</option> <option value="DK">Danemark</option> <option value="DJ">Djibouti</option> <option value="DM">Dominique</option> <option value="SV">El Salvador</option> <option value="ES">Espagne</option> <option value="EE">Estonie</option> <option value="FJ">Fidji</option> <option value="FI">Finlande</option> <option value="FR">France</option> <option value="GA">Gabon</option> <option value="GM">Gambie</option> <option value="GH">Ghana</option> <option value="GI">Gibraltar</option> <option value="GD">Grenade</option> <option value="GL">Groënland</option> <option value="GR">Grèce</option> <option value="GP">Guadeloupe</option> <option value="GU">Guam</option> <option value="GT">Guatemala</option> <option value="GN">Guinée</option> <option value="GQ">Guinée équatoriale</option> <option value="GW">Guinée-Bissau</option> <option value="GY">Guyane</option> <option value="GF">Guyane française</option> <option value="GE">Géorgie</option> <option value="HT">Haïti</option> <option value="HN">Honduras</option> <option value="HK">Hong Kong</option> <option value="HU">Hongrie</option> <option value="BV">Ile Bouvet</option> <option value="CX">Ile Christmas</option> <option value="HM">Ile Heard et iles McDonald</option> <option value="MU">Ile Maurice</option> <option value="NF">Ile Norfolk</option> <option value="KY">Iles Cayman</option> <option value="CC">Iles Cocos (Keeling)</option> <option value="CK">Iles Cook</option> <option value="FK">Iles Falkland (Malouines)</option> <option value="FO">Iles Faroe</option> <option value="MH">Iles Marshall</option> <option value="MP">Iles Northern Mariana</option> <option value="SB">Iles Salomon</option> <option value="VG">Iles Vierges, G.B.</option> <option value="VI">Iles Vierges, É.U.</option> <option value="IN">Inde</option> <option value="ID">Indonésie</option> <option value="IQ">Irak</option> <option value="IR">Iran</option> <option value="IE">Irlande</option> <option value="IS">Islande</option> <option value="IL">Israël</option> <option value="IT">Italie</option> <option value="JM">Jamaïque</option> <option value="JP">Japon</option> <option value="JO">Jordan</option> <option value="KZ">Kazakhstan</option> <option value="KE">Kenya</option> <option value="KG">Kirghizstan</option> <option value="KI">Kiribati</option> <option value="KW">Koweït</option> <option value="LA">Laos</option> <option value="LV">Lettonie</option> <option value="LB">Liban</option> <option value="LY">Libye</option> <option value="LR">Libéria</option> <option value="LI">Liechtenstein</option> <option value="LT">Lituanie</option> <option value="LU">Luxembourg</option> <option value="LS">Lésotho</option> <option value="MO">Macao</option> <option value="MK">Macédoine</option> <option value="MG">Madagascar</option> <option value="MY">Malaisie</option> <option value="MW">Malawi</option> <option value="MV">Maldives</option> <option value="ML">Mali</option> <option value="MT">Malte</option> <option value="MA">Maroc</option> <option value="MQ">Martinique</option> <option value="MR">Mauritanie</option> <option value="YT">Mayotte</option> <option value="MX">Mexique</option> <option value="MD">Moldavie</option> <option value="MC">Monaco</option> <option value="MN">Mongolie</option> <option value="MS">Montserrat</option> <option value="MZ">Mozambique</option> <option value="MM">Myanmar (Birmanie)</option> <option value="NA">Namibie</option> <option value="NR">Nauru</option> <option value="NI">Nicaragua</option> <option value="NE">Niger</option> <option value="NG">Nigéria</option> <option value="NU">Niue</option> <option value="NO">Norvège</option> <option value="NC">Nouvelle Calédonie</option> <option value="NZ">Nouvelle-Zélande</option> <option value="NP">Népal</option> <option value="OM">Oman</option> <option value="UG">Ouganda</option> <option value="UZ">Ouzbékistan</option> <option value="PK">Pakistan</option> <option value="PW">Palau</option> <option value="PS">Palestine</option> <option value="PA">Panama</option> <option value="PG">Papouasie Nouvelle Guinée</option> <option value="PY">Paraguay</option> <option value="NL">Pays-Bas</option> <option value="PH">Philippines</option> <option value="PN">Pitcairn</option> <option value="PL">Pologne</option> <option value="PF">Polynésie française</option> <option value="PT">Portugal</option> <option value="PR">Puerto Rico</option> <option value="PE">Pérou</option> <option value="QA">Qatar</option> <option value="RO">Roumanie</option> <option value="GB">Royaume-Uni</option> <option value="RU">Russie</option> <option value="RW">Rwanda</option> <option value="CD">République Démocratique du Congo</option> <option value="DO">République dominicaine</option> <option value="CZ">République tchèque</option> <option value="RE">Réunion, île de la</option> <option value="EH">Sahara Ouest</option> <option value="KN">Saint-Kitts et Nevis</option> <option value="PM">Saint-Pierre et Miquelon</option> <option value="VC">Saint-Vincent et Les Grenadines</option> <option value="SH">Sainte-Hélène</option> <option value="LC">Sainte-Lucie</option> <option value="WS">Samoa</option> <option value="AS">Samoa américaine</option> <option value="SM">San Marino</option> <option value="ST">San Tomé et Principe</option> <option value="SC">Seychelles</option> <option value="SL">Sierra Leone</option> <option value="SG">Singapour</option> <option value="SK">Slovaquie</option> <option value="SI">Slovénie</option> <option value="SO">Somalie</option> <option value="SD">Soudan</option> <option value="LK">Sri Lanka</option> <option value="GS">St-George et les iles Sandwich</option> <option value="CH">Suisse</option> <option value="SR">Surinam</option> <option value="SE">Suède</option> <option value="SJ">Svalbard et Jan Mayen</option> <option value="SZ">Swaziland</option> <option value="SY">Syrie</option> <option value="SN">Sénégal</option> <option value="TJ">Tadjikistan</option> <option value="TZ">Tanzanie</option> <option value="TW">Taïwan</option> <option value="TD">Tchad</option> <option value="IO">Territoire britannique de l'Océan Indien</option> <option value="TF">Territoires français du Sud</option> <option value="TH">Thaïlande</option> <option value="TP">Timor Est</option> <option value="TG">Togo</option> <option value="TK">Tokelau</option> <option value="TO">Tonga</option> <option value="TT">Trinidad et Tobago</option> <option value="TN">Tunisie</option> <option value="TM">Turkmenistan</option> <option value="TC">Turks et iles Caicos</option> <option value="TR">Turquie</option> <option value="TV">Tuvalu</option> <option value="UA">Ukraine</option> <option value="UM">United States Minor Outlying Islands</option> <option value="UY">Uruguay</option> <option value="VU">Vanuatu</option> <option value="VA">Vatican, cité du</option> <option value="VN">Vietnam</option> <option value="VE">Vénézuela</option> <option value="WF">Wallis et Futuna</option> <option value="YU">Yougoslavie</option> <option value="YE">Yémen</option> <option value="ZM">Zambie</option> <option value="ZW">Zimbabwé</option> <option value="EG">Égypte</option> <option value="AE">Émirats arabes unis</option> <option value="EC">Équateur</option> <option value="ER">Érythrée</option> <option value="FM">États fédérés de Micronésie</option> <option value="US">États-Unis</option> <option value="ET">Éthiopie</option> </select>

These lists were compiled from a variety of sources, both online and offline, and no guarantee is made as to their accuracy. Please report any mistakes to dave@addedbytes.com.



]]> Fri, 24 Oct 2003 23:15:17 +0100 http://www.addedbytes.com/blog/code/countries-select-box/ Dave Child ,,,,,,,,,