JS: Change input type based on select option?

Question

I have an input box that allows text (type="text"), beside that I have a select box with 2 options. The first option of the select box is "address" (marked as selected by default), the second is "distance". While the first option requires the input type to be text, the second only requires numbers...

I want to make it so that when the user clicks "Distance" as an option, it changes the input type of the input box beside it to type="number".

<div class="row collapse-col connect-input">
    <div class="col-1-2">
        <input name="send_address" id="send-address" type="text" placeholder="Address">
    </div>
    <div class="col-1-2">
        <select name="send_dist_type" id="send-dist-type">
            <option value="address" selected>Address (Default)</option>
            <option value="distance">Distance (km)</option>
        </select>
    </div>
</div>

I've googled around, I can't seem to find this out... I've asked a couple questions about inputs and JS previously on here, so I know I need to grab them by their ID's. After that, I really don't know.

Pseudo-code:

function addressChange() {
    var inputBox = document.getElementById('send-address');
    var selectBox = document.getElementById('send-dist-type');
    if (selectBox.value.selected == 'distance') {
        inputBox.type.change = 'number';
    } else {
        inputBox.type.change = 'text';
    }
}

Am I along the right path? Any help is appreciated.

I want to stay away from jQuery.

Rayon · Accepted Answer · 2016-03-22 07:33:21Z

3

selectBox.value is enough..value will be string and it does not have property as selected. Same goes for inputBox.type

function addressChange() {
  var inputBox = document.getElementById('send-address');
  this.value == 'distance' ? inputBox.type = 'number' : inputBox.type = 'text';
}

document.getElementById('send-dist-type').addEventListener('change', addressChange);

<div class="row">
  <div class="col-1">
    <div class="row collapse-col">
      <div class="col-1">
        <label for="send-address"><b>Address/Distance</b>
        </label>
      </div>
      <div class="row collapse-col connect-input">
        <div class="col-1-2">
          <input name="send_address" id="send-address" type="text" placeholder="Address">
        </div>
        <div class="col-1-2">
          <select name="send_dist_type" id="send-dist-type">
            <option value="address" selected>Address (Default)</option>
            <option value="distance">Distance (km)</option>
          </select>
        </div>
      </div>
    </div>
  </div>

edited Mar 22, 2016 at 7:33

answered Mar 22, 2016 at 7:30

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matthew Over a year ago

You are both quite fast lol, to be fair - I know Rayon answered first, but would either of the options actually be better than the other, or is it more personal preference?

Matthew Over a year ago

This seems like my preferred answer any way, but thank you @gurvinder372 for answering quickly as well!

gurvinder372 · Accepted Answer · 2016-03-22 07:30:38Z

2

try setAttribute instead

function addressChange() {
    var inputBox = document.getElementById('send-address');
    var selectBox = document.getElementById('send-dist-type');
    inputBox.setAttribute("type", selectBox.value );
}

answered Mar 22, 2016 at 7:30

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

JS: Change input type based on select option?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related