Getting issue on getting multiple textbox on option select with javascript

Question

I write a javascript code for getting multiple textboxs when a user select option but when i select a option i am able to select only one textbox. I do not know where i am wrong in this code.

Adding in snippet

<html> 
<head>  
 <script type="text/javascript">
function CheckColors(val){
/************************************************/
 var element=document.getElementById('offer');
 if(val=='color'||val=='offer')
   element.style.display='block';
 else  
   element.style.display='none';
/************************************************/
 
var element=document.getElementById('store');
 if(val=='color'||val=='store')
   element.style.display='block';
 else  
   element.style.display='none';
    

/*********************************/
var element=document.getElementById('event');
 if(val=='color'||val=='event')
   element.style.display='block';
 else  
   element.style.display='none';
/*********************************/
var element=document.getElementById('posting');
 if(val=='color'||val=='posting')
   element.style.display='block';
 else  
   element.style.display='none';
    
}

</script>
</head>
<body>
  <select name="postType" onchange='CheckColors(this.value);'> 
    <option>pick a color</option>  
    <option value="offer">Offer</option>
    <option value="store">Store</option>
    <option value="event">Event</option>
    <option value="posting">Posting</option>
  </select>
<input type="text" name="Offer" id="offer" placeholder="OFFER" style='display:none;'/>
<input type="text" name="Offer" id="offer" placeholder="OFFER" style='display:none;'/>

<input type="text" name="Store" id="store" placeholder="STORE" style='display:none;'/>
<input type="text" name="Store" id="store" placeholder="STORE" style='display:none;'/>

<input type="text" name="Event" id="event" placeholder="EVENT" style='display:none;'/>
<input type="text" name="Event" id="event" placeholder="EVENT" style='display:none;'/>

<input type="text" name="Posting" id="posting" placeholder="POSTING" style='display:none;'/>
<input type="text" name="Posting" id="posting" placeholder="POSTING" style='display:none;'/>
</body>
</html>

Maybe use `document.querySelectorAll()`instead of `document.getElementById()`. With your solution, you always get one element and with `document.querySelectorAll()` you will get an array of elements. With a loop you can iterate over it and set your textareas hidden or visible. Post: http://stackoverflow.com/a/14408904/6429774 — Philip, Aug 05 '16 at 13:04
Just tell me .. What you want if you select `offer`? How many textbox it should show? Tell me. — Nana Partykar, Aug 05 '16 at 13:14
*Minimum two* OK . But, I don't see any where you kept any condition for *max five* ? What Is Your Logic. Explain In Question. — Nana Partykar, Aug 05 '16 at 13:17
yeah i do not put condition but i want to show min 2 and max 5, my logic if user select offer, if offer have 5 textbox, so its shows 5 otherhand if select store, it has two textbox so its shows 2 textbox — Rahul Raghav, Aug 05 '16 at 13:22

score 0 · Accepted Answer · answered Aug 05 '16 at 13:32

Rest depending upon your logic you can add the conditions

 <html> 
    <head>  
     <script type="text/javascript">
    function CheckColors(val){

     document.getElementById('mapp').style.display='block';
    }

    </script>
    </head>
    <body>
      <select name="postType" onchange='CheckColors(this.value);'> 
        <option>pick a color</option>  
        <option value="offer">Offer</option>
        <option value="store">Store</option>
        <option value="event">Event</option>
        <option value="posting">Posting</option>
      </select>



    <div id="mapp" style="display:none;">
      <input type="text" name="Offer" id="offer" placeholder="OFFER" />
      <input type="text" name="Store" id="store" placeholder="STORE" />
      <input type="text" name="Event" id="event" placeholder="EVENT"/>
      <input type="text" name="Posting" id="posting" placeholder="POSTING" />
      </div>
    </body>
    </html>

Getting issue on getting multiple textbox on option select with javascript

1 Answers1