We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now


jquery, show/hide fields based on answer in drop down list, almost there!

promediagrp asked
Medium Priority
Last Modified: 2012-12-19

This was posted earlier but the question has somewhat changed so I am posting it as new.The form is at http://dev.universitybusiness.com/templates_ub/subManagement/mag_sub.html

I have commented the code pretty well. Basically, I want the following fields to be hidden until the Country code question has been answered. The fields that should be hidden are 'state', zip code, telephone number and international telephone number. If someone selects USA, all those fields with the exception of 'international telephone' should display. If someone chooses a country that is not the US, I want to hide US telephone, state and zip code. I can hide all these very well, but cannot get any to display once I choose a country.

You will notice in the jquery that is in the head of the doc, that a field called 'institution type' and other are included. If other is selected in the Institution type field, the field for 'other is displayed. This works fine. I followed this example for my other needs but it is not working. Please take a look at my jquery and html to see where I went wrong. If you find the reason, could you please give me a brief explanation so I can understand and learn from it.

This is worth 1,000 points to the first person to solve this issue for me.
The show/hide function for the Type of Institution works just fine. The show/hide fields that depend on what country is selected doesn't function correctly. They are all hidden, as should be, but I can't get them to appear when choosing a country. The page is at http://dev.universitybusiness.com/templates_ub/subManagement/mag_sub.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Subscription Signup</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js"> type="text/javascript" </script>
<script type="text/javascript" src="mktSignup.js"></script>
<style type="text/css">
<script type="text/javascript">
<!--Hide  fields depending on selections made for Country code and Institution type.-->
$(function() {
        $("#otherFields, #stateFields, #zipFields, #phoneFields, #international_phoneFields").hide();
        $("#otherFields input").attr("disabled","disabled");
            $("#stateFields input").attr("disabled","disabled");
            $("#zipFields input").attr("disabled","disabled");
            $("#phoneFields input").attr("disabled","disabled");
            $("#international_phoneFields input").attr("disabled","disabled");
            <!--If option 'Other is selected" for institution type, show text field for 'Other'-->
        $("#institutionType").change(function() {
         var val = $(this).val();
        $("#otherFields input").attr("disabled",(val=="other")?"":"disabled");
             <!--If option 'USA is selected" in country code, hide the 'international phone' field and show the 'state, zip code, US telephone number. If USA is not selected, show internation teelphone and hide state, zip, and US telephone-->
              $("#country").change(function() {
         var val = $(this).val();
        $("#stateFields input").attr("disabled",(val=="USA")?"":"disabled");
         var val = $(this).val();
        $("#zipFields input").attr("disabled",(val=="USA")?"":"disabled");
             var val = $(this).val();
        $("#phoneFields input").attr("disabled",(val=="USA")?"":"disabled");
              var val = $(this).val();
        $("#international_phoneFields input").attr("disabled",(val=="USA")?"":"disabled");
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
<div id="container">
  <h1>University Business Magazine Subscription Request</h1>
  <p>University Business magazine is the higher ed publication for presidents and other senior officers at two and four-year colleges and universities throughout the United States. UB is circulated to 46,000+ leaders who manage enrollment, technology, academic affairs and legislation. The magazine is free to qualified individuals in the United States and is available in both print and digital editions (if you live outside of the United States and are interested in a paid subscription, <a href="mailto:subscriptions@promediagrp.com">contact us</a>). Complete all fields on the subscription form, as this information is required for audit purposes.</p>
  <!--begin printSubscription Form-->
  <form id="printSubscription" action="" method="post">
    <div class="error" style="display:none;"></div>
    <!--BEGIN Email and Password-->
      <legend>Email and Password</legend>
      <p>To get started, please enter your e-mail address.<br />
        <label for="email">*Email</label>
        <br />
        <input id="email" class="required email"  name="email" size="40" type="email" value="" title="Email is required"/>
        <br />
        <label for="email2">*Confirm email:</label>
        <br />
        <input id="email2" class="required" equalTo="#emai11"  name="email2"  size="40" type="email" value="" title="Email is required" />
      <p>Please create a password to to manage your e-mail preferences and magazine subscription online.<br />
        <label for="password1">*Password:</label>
        <br />
        <input id="password1" class="required"  name="password1" size="20" type="password" value="" title="Password is required"/>
        <br />
        <label for="password2">*Retype Password:</label>
        <br />
        <input id="password2" class="required" equalTo="#password1" maxlength="40" name="password2"  size="20" type="password" value="" title="Password is required" />
    <!--END Email and Password-->
    <!--BEGIN Subscriber information-->
      <legend>Subscriber Information</legend>
        <label for="firstName">*First name</label>
        <br />
        <input name="firstName" type="text" class="required" id="firstName" title="First name required" value="" />
        <label for="lastName"><br />
          *Last name</label>
        <br />
        <input name="lastName" type="text" class="required" id="lastName" value="" title="Last name required"/>
         <label for ="jobFunction">*Job function</label><br />
            <select id="jobFunction" class="required field" name="jobFunction" title="Job function required">
                    <option value="">Choose a job function:</option>
                <option value="senior_exec_management">Senior Executive Management</option>
                <option value="academicManagement">Academic Management</option>
                <option value="admissions_recruitment">Admissions Recruitment</option>
                <option value="personnel_HR">Personnel/HR</option>
                <option value="development_advancement">Development/Advancement</option>
                <option value="finance_business">Finance/Business</option>
                <option value="facilities_planning">Facilities &amp; Planning</option>
                <option value="library_mediaDirectors">Library/Media Directors</option>
                <option value="student_services">Student Services</option>
                <option value="technology">Technology</option>
                <option value="health_services">Health Services</option>
                <option value="otherInstitution">Other</option>
        <label for="jobResponsibilities">Job responsibilities </label>
        <br />
        <input name="resp1" type="checkbox" id="resp1" value="resp1" />
        responsibiltiy one<br />
        <input name="resp2" type="checkbox" id="resp2" value="resp2" />
        responsibiltiy two<br />
        <input name="resp3" type="checkbox" id="resp3" value="resp3" />
        responsibiltiy three<br />
        <input name="resp4" type="checkbox" id="resp4" value="resp4" />
        responsibiltiy four<br />
        <input name="resp5" type="checkbox" id="resp5" value="resp5" />
        responsibiltiy five<br />
       <!--ENDSubscriber information-->
    <!--BEGIN Institution information-->
      <legend>Institution Information</legend><br />
        <label for="Institution">*Institution/Organization</label><br />
        <input id="Institution" type="text" class="required" name="Institution" title="Institution/Organization required"  />
      <!--if US is NOT selected, hide STATE, ZIP Code, and phone fields below. Show 'city' and 'international telephone fields'. If USA is chosen, hide 'international telephone' field-->
    <label for= "country">*Country</label><br />
      <select id="country" class="required field" name="country" title="Country required">
                    <option value="">Choose a country:</option>
            <option value="USA">United States of America </option>
              <option value="CAN">Canada </option>
              <option value="DEU">Germany </option>
              <option value="FRA">France </option>
              <option value="GBR">United Kingdom </option>
              <option value="IND">India </option>
              <option value="">-----------------</option>
              <option value="AFG">Afghanistan </option>
              <option value="ALB">Albania </option>
              <option value="DZA">Algeria </option>
              <option value="ASM">American Samoa </option>
              <option value="AND">Andorra </option>
              <option value="AGO">Angola </option>
              <option value="AIA">Anguilla </option>
              <option value="ATA">Antarctica </option>
              <option value="ATG">Antigua and Barbuda </option>
              <option value="ARG">Argentina </option>
              <option value="ARM">Armenia </option>
              <option value="ABW">Aruba </option>
              <option value="AUS">Australia </option>
              <option value="AUT">Austria </option>
              <option value="AZE">Azerbaijan </option>
              <option value="BHS">Bahamas </option>
              <option value="BHR">Bahrain </option>
              <option value="BGD">Bangladesh </option>
              <option value="BRB">Barbados </option>
              <option value="BLR">Belarus </option>
              <option value="BEL">Belgium </option>
              <option value="BLZ">Belize </option>
              <option value="BEN">Benin </option>
              <option value="BMU">Bermuda </option>
              <option value="BTN">Bhutan </option>
              <option value="BOL">Bolivia </option>
              <option value="BIH">Bosnia and Herzegowina </option>
              <option value="BWA">Botswana </option>
              <option value="BVT">Bouvet Island </option>
              <option value="BRA">Brazil </option>
              <option value="IOT">British Indian Ocean Territory </option>
              <option value="BRN">Brunei Darussalam </option>
              <option value="BGR">Bulgaria </option>
              <option value="BFA">Burkina Faso </option>
              <option value="BDI">Burundi </option>
              <option value="KHM">Cambodia </option>
              <option value="CMR">Cameroon </option>
              <option value="CPV">Cape Verde </option>
              <option value="CYM">Cayman Islands </option>
              <option value="CAF">Central African Republic </option>
              <option value="TCD">Chad </option>
              <option value="CHL">Chile </option>
              <option value="CHN">China </option>
              <option value="CXR">Christmas Island </option>
              <option value="CCK">Cocoa (Keeling) Islands </option>
              <option value="COL">Colombia </option>
              <option value="COM">Comoros </option>
              <option value="COG">Congo </option>
              <option value="COK">Cook Islands </option>
              <option value="CRI">Costa Rica </option>
              <option value="CIV">Cote Divoire </option>
              <option value="HRV">Croatia (local name: Hrvatska) </option>
              <option value="CUB">Cuba </option>
              <option value="CYP">Cyprus </option>
              <option value="CZE">Czech Republic </option>
              <option value="DNK">Denmark </option>
              <option value="DJI">Djibouti </option>
              <option value="DMA">Dominica </option>
              <option value="DOM">Dominican Republic </option>
              <option value="TMP">East Timor </option>
              <option value="ECU">Ecuador </option>
              <option value="EGY">Egypt </option>
              <option value="SLV">El Salvador </option>
              <option value="GNQ">Equatorial Guinea </option>
              <option value="ERI">Eritrea </option>
              <option value="EST">Estonia </option>
              <option value="ETH">Ethiopia </option>
              <option value="FLK">Falkland Islands (Malvinas) </option>
              <option value="FRO">Faroe Islands </option>
              <option value="FJI">Fiji </option>
              <option value="FIN">Finland </option>
              <option value="FXX">France, Metropolitan </option>
              <option value="GUF">French Guiana </option>
              <option value="PYF">French Polynesia </option>
              <option value="ATF">French Southern Territories </option>
              <option value="GAB">Gabon </option>
              <option value="GMB">Gambia </option>
              <option value="GEO">Georgia </option>
              <option value="GHA">Ghana </option>
              <option value="GIB">Gibraltar </option>
              <option value="GRC">Greece </option>
              <option value="GRL">Greenland </option>
              <option value="GRD">Grenada </option>
              <option value="GLP">>Guadeloupe </option>
              <option value="GUM">Guam </option>
              <option value="GTM">Guatemala </option>
              <option value="GIN">Guinea </option>
              <option value="GNB">Guinea-Bissau </option>
              <option value="GUY">Guyana </option>
              <option value="HTI">Haiti </option>
              <option value="HMD">Heard and Mc Donald Islands </option>
              <option value="HND">Honduras </option>
              <option value="HKG">Hong Kong </option>
              <option value="HUN">Hungary </option>
              <option value="ISL">Iceland </option>
              <option value="IDN">Indonesia </option>
              <option value="IRN">Iran (Islamic Republic of) </option>
              <option value="IRQ">Iraq </option>
              <option value="IRL">Ireland </option>
              <option value="ISR">Israel </option>
              <option value="ITA">Italy </option>
              <option value="JAM">Jamaica </option>
              <option value="JPN">Japan </option>
              <option value="JOR">Jordan </option>
              <option value="KAZ">Kazakhstan </option>
              <option value="KEN">Kenya </option>
              <option value="KIR">Kiribati </option>
              <option value="PRK">Korea, Democratic Peoples Republic of </option>
              <option value="KOR">Korea, Republic of </option>
              <option value="KWT">Kuwait </option>
              <option value="KGZ">Kyrgyzstan </option>
              <option value="LAO">Lao Peoples Democratic Republic </option>
              <option value="LVA">Latvia </option>
              <option value="LBN">Lebanon </option>
              <option value="LSO">Lesotho </option>
              <option value="LBR">Liberia </option>
              <option value="LBY">Libyan Arab Jamahiriya </option>
              <option value="LIE">Liechtenstein </option>
              <option value="LTU">Lithuania </option>
              <option value="LUX">Luxembourg </option>
              <option value="MAC">Macau </option>
              <option value="MKD">Macedonia, The Former Yugoslav Republic of </option>
              <option value="MDG">Madagascar </option>
              <option value="MWI">Malawi </option>
              <option value="MYS">Malaysia </option>
              <option value="MDV">Maldives </option>
              <option value="MLI">Mali </option>
              <option value="MLT">Malta </option>
              <option value="MHL">Marshall Islands </option>
              <option value="MTQ">Martinique </option>
              <option value="MRT">Mauritania </option>
              <option value="MVS">Mauritius </option>
              <option value="MYT">Mayotte </option>
              <option value="MEX">Mexico </option>
              <option value="FSM">Micronesia, Federated States of </option>
              <option value="MDA">Moldova, Republic of </option>
              <option value="MCO">Monaco </option>
              <option value="MNG">Mongolia </option>
              <option value="MSR">Montserrat </option>
              <option value="MAR">Morocco </option>
              <option value="MOZ">Mozambique </option>
              <option value="MMR">Myanmar </option>
              <option value="NAM">Namibia </option>
              <option value="NRU">Nauru </option>
              <option value="NPL">Nepal </option>
              <option value="NLD">Netherlands </option>
              <option value="ANT">Netherlands Antilles </option>
              <option value="NCL">New Caledonia </option>
              <option value="NZL">New Zealand </option>
              <option value="NIC">Nicaragua </option>
              <option value="NER">Niger </option>
              <option value="NGA">Nigeria </option>
              <option value="NIU">Niue </option>
              <option value="NFK">Norfolk Island </option>
              <option value="MNP">Northern Mariana Islands </option>
              <option value="MOR">Norway </option>
              <option value="OMN">Oman </option>
              <option value="PAK">Pakistan </option>
              <option value="PLW">Palau </option>
              <option value="PAN">Panama </option>
              <option value="PNG">Papua New Guinea </option>
              <option value="PRY">Paraguay </option>
              <option value="PER">Peru </option>
              <option value="PHL">Philippines </option>
              <option value="PCN">Pitcairn </option>
              <option value="POL">Poland </option>
              <option value="PRT">Portugal </option>
              <option value="PRI">Puerto Rico </option>
              <option value="QAT">Qatar </option>
              <option value="REU">Reunion </option>
              <option value="ROM">Romania </option>
              <option value="RUS">Russian Federation </option>
              <option value="RWA">Rwanda </option>
              <option value="KNA">Saint Kitts and Nevis </option>
              <option value="LCA">Saint Lucia </option>
              <option value="VCT">Saint Vincent and the Grenadines </option>
              <option value="WSM">Samoa </option>
              <option value="SMR">San Marino </option>
              <option value="STP">Sao Tome and Principe </option>
              <option value="SAU">Saudi Arabia </option>
              <option value="SEN">Senegal </option>
              <option value="SYC">Seychelles </option>
              <option value="SLE">Sierra Leone </option>
              <option value="SGP">Singapore </option>
              <option value="SVK">Slovakia (Slovak Republic) </option>
              <option value="SVN">Slovenia </option>
              <option value="SLB">Solomon Islands </option>
              <option value="SOM">Somalia </option>
              <option value="ZAF">South Africa </option>
              <option value="SGS">South Georgia and the South Sandwich Islands </option>
              <option value="ESP">Spain </option>
              <option value="LKA">Sri Lanka </option>
              <option value="SHN">St. Helena </option>
              <option value="SPM">St. Pierre and Miquelon </option>
              <option value="SDN">Sudan </option>
              <option value="SUR">Suriname </option>
              <option value="SJM">Svalbard and Jan Mayen Islands </option>
              <option value="SWZ">Swaziland </option>
              <option value="SWE">Sweden </option>
              <option value="CHE">Switzerland </option>
              <option value="SYR">Syrian Arab Republic </option>
              <option value="TWN">Taiwan </option>
              <option value="TJK">Tajikistan </option>
              <option value="TZA">Tanzania, United Republic of </option>
              <option value="THA">Thailand </option>
              <option value="TGO">Togo </option>
              <option value="TKL">Tokelau </option>
              <option value="TON">Tonga </option>
              <option value="TTO">Trinidad and Tobago </option>
              <option value="TUN">Tunisia </option>
              <option value="TUR">Turkey </option>
              <option value="TKM">Turkmenistan </option>
              <option value="TCA">Turks and Caicos Islands </option>
              <option value="TUV">Tuvalu </option>
              <option value="UGA">Uganda </option>
              <option value="UKR">Ukraine </option>
              <option value="ARE">United Arab Emirates </option>
              <option value="UMI">United States Minor Outlying Islands </option>
              <option value="URY">Uruguay </option>
              <option value="UZB">Uzbekistan </option>
              <option value="VUT">Vanuatu </option>
              <option value="VAT">Vatican City State (Holy See) </option>
              <option value="VEN">Venezuela </option>
              <option value="VNM">Viet Nam </option>
              <option value="VGB">Virgin Islands (British) </option>
              <option value="VIR">Virgin Islands (U.S.) </option>
              <option value="WLF">Wallisw and Futuna Islands </option>
              <option value="ESH">Western Sahara </option>
              <option value="YEM">Yeman </option>
              <option value="YUG">Yugoslavia </option>
              <option value="ZAR">Zaire </option>
              <option value="ZMB">Zambia </option>
              <option value="ZWE">Zimbabwe </option>
              <option value="UNK">Not Listed </option>
        <label for="city">*City<br />
          <input name="city" type="text" class="required" id="city" title="City required"  />
      <p id="stateFields"><label for="stateFields">*State</label><!--hide if USA is not chosen in country drop-down menu-->
      <br />
      <select id="stateFields" class="required field" name="state" title="State required">
                    <option value="">Choose State:</option>
              <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>
     <p id="zipFields">
      <!--hide if USA is not chosen in country drop-down menu-->
            <label for="zipfields">*Zip code:</label><br />
        <input maxlength="10" id="zipFields" name="zipfields" type="text" class="required zipcode" value="" title="Zip code required"/>
        <br />
   <!--hide if USA is NOT chosen in country drop-down menu-->
   <p id="phoneFields"><label for="phone">*Telephone:<br />
   <input id="phoneFields" maxlength="14" name="phone" type="text" class="required phone" title="Telephone required"/>
   <!--Hide if USA is chosen in country drop-down menu-->
   <p id="international_phoneFields"><label for="international_phone">*International telephone</label><br />
     <em>+xx xx xxx xxxx (+xx = Country Code)<br />
     <input id="international_phoneFields"  name="international_phoneFields" type="text" class="required" title="Telephone required"/>
     <label for ="institutionType">*Type of Institution/ Organization</label>
     <br />
      <select id="institutionType" class="required field" name="institutionType" title="Institution/Organization type required">
                    <option value="">Choose type:</option>
          <option value="2yr">Two year college</option>
          <option value="4yr">Four year college</option>
          <option value="commCollege">Community college</option>
          <option value="univ">University</option>
          <option value="Proprietary">Proprietary school</option>
          <option value="learningInst">Learning Institution</option>
          <option value="other">Other</option>
   <!--hide if option value 'other' is selected in previous question-->
         <p id="otherFields"><label for "otherFields"> Other Institution</label>
        <br />
        <input id="otherFields" name="otherfields" type="text" value="" />
     <p> <label for="InstitutionControl">*Type of institution/organization control:</label><br />
        <select id="InstitutionControl" class="required field" name="InstitutionControl" title="Institution Control required"/>
          <option value="">Select</option>
          <option value="pulic">Public</option>
          <option value="privateProfit">Private for-profit</option>
          <option value="private_non_profit">Private non-profit</option>
    <!--BEGIN Subscription choices-->
       <legend>*Subscription Choices (at least one must be checked) </legend>
       <p><input id="receivePrint" type="checkbox" name="receivePrint" class="checkbox"/>
        Yes, I wish to receive University Business print edition, mailed each month.<br />
        <input id="receiveDigital" type="checkbox" class="checkbox" name="receiveDigital"  />
        Yes, I wish to receive University Business digital edition. <br />
        <input id="renewal" type="checkbox" class="checkbox" name="renewal"  />
        This is a renewal.<br />
        <input id="notReceive" type="checkbox" class="checkbox" name="not receive"  />
        No, I do *not* wish to receive University Business magazine. </p>
      <!--END Subscription choices-->
   <!--Begin unique identifier-->
      <legend>Create a Unique Identifier</legend>
      <p><label for="UniqueIdentifier">*In lieu of a signature and for audit purposes, please indicate what city you were born in.</label>
      <br />
      <input name="UniqueIdentifier" id="UniqueIdentifier" class="required" type="text" title="Unique Identifier required" />
   <!--END unique identifier-->
      <input name="rememberMe" type="checkbox" id="rememberMe" />
      Remember me on this computer </p>
      <input name="submit" type="submit" id="submit" value="Submit"/>
    <p>Upon submission of this request, you will receive an e-mail with a confirmation of your profile and subscription. If you do not receive this e-mail, contact our <a href="mailto:webmaster@universitybusiness.com">webmaster.</a></p>
<!--end #subscriptionForm-->

Open in new window

Watch Question

You're declaring a function, but not using or naming it, so how do you propose it gets executed?  Did you mean to use onload?
window.onload = function(){ ... ); 

Open in new window


Isn't it being called from the jquery library? If I remove all the code that has to do with the Country code and only include the part about Institution type, it works just fine.  So I don't think I need to name it or use an onload.

You are declaring multiple instances of the val variable.  That's inefficient, if nothing else.

Line 34 also declares a function inside the function that starts on line 28.  That may be causing some problems.



 I tried to fix the errors you pointed out to the best of my ability, but it's still wrong. But am I close?
<script type="text/javascript">
<!--Hide the 'Other' field depending on selections made for Institution type.-->
$(function other() {
        $("#otherFields input").attr("disabled","disabled");
        <!--If option 'Other is selected" for institution type, show text field for 'Other'-->
        $("#institutionType").change(function other() {
         var val = $(this).val();
        $("#otherFields input").attr("disabled",(val=="other")?"":"disabled");
             <!--Hide  fields until selection is made for Country-->
             $(function countryCode() {
        $("#stateFields, #zipFields, #phoneFields, #international_phoneFields").hide();
            $("#stateFields input").attr("disabled","disabled");
            $("#zipFields input").attr("disabled","disabled");
            $("#phoneFields input").attr("disabled","disabled");
            $("#international_phoneFields input").attr("disabled","disabled");
            <!--If USA is selected, show stateFields, zipFields, phoneFields, otherwise hed->
              $("#country").change(function countryCode() {
                   var val2 = $(this).val2();
        $("#stateFields  input").attr("disabled",(val2=="USA")?"":"disabled");

        $("#zipFields input").attr("disabled",(val2=="USA")?"":"disabled");

        $("#phoneFields input").attr("disabled",(val2=="USA")?"":"disabled");

        $("#international_phoneFields input").attr("disabled",(val2=="USA")?"":"disabled");

Event handlers (such as thet .change event handler) need to be placed inside a statement similar to the following in order to work.  By using the .ready function, you are allowing the page to be built first, which allows the browser to locate the inputs.
  // Your code goes here.

Open in new window


That didn't work either.
Thank you for trying.

The code that I am using is a modification that Alien109 helped me with when I had a different account with this forum. It was never my original code and so I am not sure how to modify it because I don't know javascript or jquery well enough to write code, I can only modify it if it is simple enough.

Alien 109, are you there?

This code is untested, but the basic approach should work.  The idea is to create a single function that is executed after the page is completely loaded by the browser.  In that function, some fields are (by default) disabled.  Two event handlers are also created that handle the change events and hide/unhide fields as needed.

Note that you were also trying to call .val2() as a function in your last code, which won't work, because that function does not exist.  There's nothing wrong with two functions having a variable called val.  My previous comment was related to defining the same variable multiple times in the same function.
<script type="text/javascript">
	$("#otherFields input").attr("disabled","disabled");
	<!--If option 'Other is selected" for institution type, show text field for 'Other'-->
	$("#institutionType").change(function other() {
		var val = $(this).val();
		$("#otherFields input").attr("disabled",(val=="other")?"":"disabled");
	<!--Hide  fields until selection is made for Country-->
	$("#stateFields, #zipFields, #phoneFields, #international_phoneFields").hide();
	$("#stateFields input").attr("disabled","disabled");
	$("#zipFields input").attr("disabled","disabled");
	$("#phoneFields input").attr("disabled","disabled");
	$("#international_phoneFields input").attr("disabled","disabled");
	<!--If USA is selected, show stateFields, zipFields, phoneFields, otherwise hed->
	$("#country").change(function countryCode() {
		var val = $(this).val();
		$("#stateFields  input").attr("disabled",(val=="USA")?"":"disabled");
		$("#zipFields input").attr("disabled",(val=="USA")?"":"disabled");
		$("#phoneFields input").attr("disabled",(val=="USA")?"":"disabled");
		$("#international_phoneFields input").attr("disabled",(val=="USA")?"":"disabled");

Open in new window

Unlock this solution and get a sample of our free trial.
(No credit card required)



thank you so very much. You have been great with me, and I've learned from you as well.

I thought I was able to award as many points as I wanted, but the system will not let me award more than 500 points, unless I am mistaken...

Thanks again,


Thank you for helping me. It is truly appreciated
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.