CODEWITHSUNDEEP
javascriptjqueryhtmlcss
cbreuner
cbreuner

Reputation: 107

how to make multiple form inputs appear after option is selected

Long time leacher, first time poster.

I found a great snippet here that has a form text input appear after an option is selected from the dropdown menu. It works like a charm, and each option now has one input associated with it. Now I need to tweak the js to make two entrees appear for option two, three entrees for option three, up too five. Currently, one text box will appear for each option. So on option 2, I need 'text1' and 'text2' to appear, on option 3 I need 'text1' text2' and 'text3' to appear, and so on.

Please let me know if I am being unclear in anyway. Here is what I'm working with. 

<select id='combo'>
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<input  id='text1' style='display: none'/>
<input  id='text2' style='display: none'/>
<input  id='text3' style='display: none'/> ''


<script>
document.getElementById('combo').onchange = function() {

var display = this.selectedIndex == 0 ? "inline" : "none"; document.getElementById('text1').style.display = display;

var display = this.selectedIndex == 1 ? "inline" : "none"; document.getElementById('text2').style.display = display;

var display = this.selectedIndex == 2 ? "inline" : "none"; document.getElementById('text3').style.display = display;

} ''

I appreciate your time.

Upvotes: 0

Views: 1897

Answers (4)

Wesley Smith
Wesley Smith

Reputation: 19571

This should work for you:

$('#combo').change(function(){
    $('#myOptionsDiv').html(''); //added this to clear the div before setting inputs
    var num =$(this).val();
    for(var i = 0; i < num; i++){
      $('#myOptionsDiv').append('<input type="text" class="myInputs" /><br>');
      }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id='combo'>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="myOptionsDiv">  </div>

If you want to access the fields, you can do so like:

var firstInputValue = $('.myInputs:eq(0)).val(); //use 0 in :eq() because arrays start at 0

var secondInputValue = $('.myInputs:eq(1)).val();

Upvotes: 1

Qwerty
Qwerty

Reputation: 31919

Try changing it to a for cycle. This might not be working, but you get the idea.

document.getElementById('combo').onchange = function() {

    for (var i = 0; i <= this.selectedIndex; i++) {
        var display = this.selectedIndex == i ? "inline" : "none"; document.getElementById('text'+(i+1)).style.display = display;
    }

}

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24703

I would do this in pure JS via a loop. This also enables you to add more inputs without editing the JS

http://jsfiddle.net/odj3pmtg/1

document.getElementById('combo').onchange = function() {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; ++i)   
    {
        if(i < document.getElementById('combo').value){
            inputs[i].style.display = 'inline';
        } else {
            inputs[i].style.display = 'none';
        }
    }

}

Upvotes: 2

Bucky
Bucky

Reputation: 929

I'm sure someone could improve on this but it should work:

document.getElementById('combo').onchange = function() {
    // first reset all to hidden
    document.getElementById('text1').style.display = 'none';
    document.getElementById('text2').style.display = 'none';
    document.getElementById('text3').style.display = 'none';

    // then switch case to show the required boxes
    switch(this.selectedIndex){
        case 0:
            document.getElementById('text1').style.display = 'inline';
            break;
        case 1:
            document.getElementById('text1').style.display = 'inline';
            document.getElementById('text2').style.display = 'inline';
            break;
        case 2:
            document.getElementById('text1').style.display = 'inline';
            document.getElementById('text2').style.display = 'inline';
            document.getElementById('text3').style.display = 'inline';
            break;
        default:
            break;
    }
}

Upvotes: 1

Related Questions