CODEWITHSUNDEEP
javascripthtml-selecthtml-input
bcsteeve
bcsteeve

Reputation: 1001

JavaScript: is it possible to dynamically change an <input> to a <select> element and back again?

I'm working with "Zen Cart" shopping cart. The default is to have visitor select country and "state" populates dynamically. If they choose a country that has no defined states, the drop down says "type your state below" and an input box dynamically appears.

Current way is fine if the states are defined for that country, but if not then its much better to just have the drop down appear as a text input instead of having a new text input appear.

So can I dynamically change the dropdown to be a text input if there are no choices? And, can it default to being a text input if there's no JavaScript enabled?

I see this question: Change select to input on selection of country?

But I don't get the jQuery reference. :(

Upvotes: 3

Views: 2428

Answers (2)

RobG
RobG

Reputation: 147383

Put the text input in the HTML. If a country is selected that has states, replace the input with a select element that has the states (or territories or provinces or whatever). If JavaScript isn't enabled or available, the user enters the state manually.

Something like:

<select name="country" onchange="updateState(this);">
  <option value="country0">country0
  <option vlaue="country1">country1
  <option>country...
</select>
...
<input type="text" name="state">


<script>
  function updateState(element) {
    if ( /* element.value has states */) {
      // replace ths.form.state with a select
      // of appropriate states
    } else {
      // replace this.form.state with a text input
    }
  }
</script>

The else block is required because the user may select a country with states, then select one without states. There are variations on the above (e.g. toggling display rather than replace), choose whatever suits.

Upvotes: 1

DaneSoul
DaneSoul

Reputation: 4511

There is another implementation posstible:

You add in your HTML both INPUT and SELECT elements.

If you have defined STATES you make INPUT display: none; and add variants to choose into your SELECT; otherwise, you make SELECT display: none;, so user see the INPUT.

It's easy to implement and work with and clear for the user.

Upvotes: 2

Related Questions