CODEWITHSUNDEEP
javascripthtml
Tom
Tom

Reputation: 3

Javascript style.display not working with form

I know there are variations of this question on other threads, but none seem to help me with my answer. Hopefully it is quite a simple one... What am I doing wrong?

I have an option field, and when the user selects "Between" as a drop-down option, I want it to add another input box - in this case called 'AdditionalThreshold'.

function toggleMe(a) {
  var e=document.getElementByName("AdditionalThreshold");
  if(e.style.display=="none"){
    e.style.display = "block";
  } else {
    e.style.display = "none";
  }
  return true;
}
<td>
  <select name="ThresholdType">
    <option value="GreaterThan">Greater than or Equal to</option>
    <option value="Between" onClick="toggleMe('BetweenField')">Between</option>
    <option value="LessThan">Less than</option>
  </select>
</td>
<td>
  <input name="Threshold" type="text" size="4" />
  <input name="AdditionalThreshold" type="text" id="BetweenField" size="4" style="display:none;">
</td>

I am quite the novice at this so forgive my coding, but any help would be much appreciated.

Thanks

Upvotes: 0

Views: 273

Answers (3)

Joe Seifi
Joe Seifi

Reputation: 1725

<select name="ThresholdType">
    <option value="GreaterThan">Greater than or Equal to</option>
    <option value="Between">Between</option>
    <option value="LessThan">Less than</option>
</select>
<input name="Threshold" type="text" size="4" />
<input name="AdditionalThreshold" type="text" id="BetweenField" size="4" class="hide">

<script>
function toggleBetween(event) {
    if(event.target.value.toLowerCase() === 'between') {
      document.querySelector('#BetweenField').classList.remove('hide');
    } else {
      document.querySelector('#BetweenField').classList.add('hide');
    }
}

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('select[name="ThresholdType"]').addEventListener('change', toggleBetween, false);
})
</script>

<style>
.hide {
    display: none;
}
</style>

http://jsbin.com/pigocekava/1/edit?html,css,js,output

Upvotes: 0

scraaappy
scraaappy

Reputation: 2886

document.getElementById('ThresholdType').addEventListener("change", function(){
	var visibility = (this.value === 'Between')?"block":"none";
    console.log(this.value);
    document.getElementsByName('AdditionalThreshold')[0].style.display = visibility;
})
<select id="ThresholdType">
        <option value="GreaterThan">Greater than or Equal to</option>
        <option value="Between">Between</option>
        <option value="LessThan">Less than</option>
    </select>
    <input id="Threshold" type="text" size="4" />
    <input name="AdditionalThreshold" type="text" id="BetweenField" size="4" style="display:none;">

Upvotes: 0

Ju66ernaut
Ju66ernaut

Reputation: 2691

I think you mean to use: 

document.getElementsByName("AdditionalThreshold")

in which case returns an array-like structure called a NodeList. So you would want to do 

document.getElementsByName("AdditionalThreshold")[0];

to select the first one. (assuming thats the one you want)

Upvotes: 2

Related Questions