How hidden/visible a label on value from a select into a form

Question

Having:

<label for="option">Option: 
  <select name="option" required>
    <option value="Yes">Yes</option>
    <option value="No" selected>No</option>
  </select>
</label>

<label for="mytext">Text:
  <input name="mytext" type="text">
</label>

How solve for:

With OPTION to NO then MYTEXT need to be HIDDEN (label included);
With OPTION to YES then MYTEXT need to be VISIBLE (label included);

On loading of page MYTEXT need to be HIDDEN (label included).

helb · Accepted Answer · 2017-10-24T17:08:14.617

2

Just use event listeners:

document.addEventListener('DOMContentLoaded', function() { // runs after all elements are loaded

  // element selectors:
  var mytextLabel = document.querySelector('label[for=mytext]');
  var option = document.querySelector('select[name=option]');
  var mytextInput = mytextLabel.querySelector('input');

  mytextLabel.classList.add('hidden'); // hides 'mytext' after page load

  option.addEventListener('change', function(event) { // runs after option is selected
    // the actual logic is pretty straightforward:
    if (event.target.value === 'Yes') {
      mytextLabel.classList.remove('hidden'); // shows the label with input inside
      mytextInput.required = true; // marks the input as required
    } else {
      mytextLabel.classList.add('hidden'); // hides the label with input inside
      mytextInput.required = false; // marks the input as optional
    }
  });
});

.hidden {display: none;}

<form onsubmit="alert('sent'); return false;">
<label for="option">Option: 
  <select name="option" required>
    <option value="Yes">Yes</option>
    <option value="No" selected>No</option>
  </select>
</label>

<label for="mytext">Text:
  <input name="mytext" type="text" />
</label>
<button type="submit">Send</button>
</form>

EDIT: added switching of required attribute

EDIT: use CSS classes as suggested by @ScottMarcus (you probably don't want to override display: hidden in most cases, but it's still a better way than inline styles)

edited Oct 24 '17 at 17:08

answered Oct 24 '17 at 15:38

helb

3,154
15
21

1

It's actually better to use classes regardless of whether more elements will need to be hidden as the creation of inline styles should always be a last resort due to the difficulty in overriding them. – Scott Marcus Oct 24 '17 at 16:39
Thanks, when element mytext is hidden and submit form don't work becouse need content. How i can fix it adding too disable to script? – Marcello Impastato Oct 24 '17 at 16:40
@MarcelloImpastato You can switch off the `required` paramerer with `inputelement.required = false;` when hiding it (and `true` when showing it). See this: https://stackoverflow.com/questions/25628209/dynamically-change-required-atributte-for-html5-input-control – helb Oct 24 '17 at 16:50
Change attribute required not help me much. Becouse on submit is added too mytext field. I need disable it. I have tried with: mytext.disabled = true but don't work. Can i fix? – Marcello Impastato Oct 24 '17 at 16:52
`mytext` is the label in the example, you need to switch the `required` attribute for input inside that label. I added it to the answer. – helb Oct 24 '17 at 17:00

score 0 · Answer 2 · answered Oct 24 '17 at 15:33

You just need to set up a CSS class the sets the element to be hidden and have that class applied to the element by default if you want it hidden from the start. Then, via a change event handler on the select, you toggle the use of that class with the .classList object's .toggle() method:

var input = document.querySelector("[name='mytext']");
document.querySelector("select[name='option']").addEventListener("change", function(){
  input.classList.toggle("hidden");
});

.hidden {  display:none; } /* This is appled to the input by default and toggled as needed */

<label for="option">Option: 
  <select name="option" required>
    <option value="Yes">Yes</option>
    <option value="No" selected>No</option>
  </select>
</label>

<label for="mytext">Text:
  <input name="mytext" type="text" class="hidden">
</label>

How hidden/visible a label on value from a select into a form

2 Answers2