Dropdown box to change textbox?

Valleriani
Valleriani used Ask the Experts™
on
Right now I'm using basic html, but using javascript would be fine, except I haven't really dont much JS in the past.

Lets say I have this:

<th><span class="wsp_required">+</span>Telephone<span> </span><span> </span><span> </span></th>
<td><div class=inputTextFiller><input class="inputTextLeft" type="text" name="fld14_1" id="fld14_1" value="" style="width:30px" maxlength=\"3\" /> <span> -</span>
<input class="inputTextLeft" type="text" name="fld14_2" id="fld14_2" value="" style="width:30px" maxlength=\"3\" /> <span> -</span>
<input class="inputTextLeft" type="text" name="fld14_3" id="fld14_3" value="" style="width:40px" maxlength=\"4\" /></div></td>


What this is, is a 3 box telephone inputbox. It works fine for general usage, but EU members have trouble.  I was wondering how I could create it so that there is a dropdown box beside this that has the two options in it: "USA" and "OTHER". When selecting OTHER, the 3 inputboxes above would become one large inputbox, and selecting USA would bring back the above 3 inputboxes.

Is this possible? If so, how can it be done with javascript (or something else while using a .html file)

Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Easy way to do this is with jQuery:

HTML:

Drop down:

<select id="country">
     <option value="USA">USA</option>
     <option value="Other">Other</option>
</select>

<table><thead><tr><th><span class="wsp_required">+</span>Telephone<span> </span><span> </span><span> </span></th></tr></thead>
<tbody><tr id="usa_ph"><td><div class=inputTextFiller><input class="inputTextLeft" type="text" name="fld14_1" id="fld14_1" value="" style="width:30px" maxlength=\"3\" /> <span> -</span>
<input class="inputTextLeft" type="text" name="fld14_2" id="fld14_2" value="" style="width:30px" maxlength=\"3\" /> <span> -</span>
<input class="inputTextLeft" type="text" name="fld14_3" id="fld14_3" value="" style="width:40px" maxlength=\"4\" /></div></td></tr>
<tr id="other_ph"><td><div class=inputTextFiller><input class="inputTextLeft" type="text" name="fld14_1" id="fld14_1" value="" style="width:150px" maxlength=\"10\" /></div></td></tr>
</tbody></table>

Your jQuery would be as follows:

$('#country').change(function() {
  if ($("select#country option:selected").val() == "USA") {
        $("tr#usa_ph").show();
        $("tr#other_ph").hide();
   } else {
        $("tr#other_ph").show();
        $("tr#usa_ph").hide();
   }
});

And your CSS would be

tr#other_ph {
     display: none;
}
You can download jQuery at http://jquery.com/

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial