Form Elements

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor at sit mauris lectus. Scelerisque consequat tempor ipsum sagittis, nunc elit.

Inputfield - Single Line
23/02/2021
TeamBank Welt
TeamBank Markenportal 
<div class="module module--form-element">
  <div class="field field--text field--required"><label for="text">Inputfield - Single Line&#8239;*</label><div class="input input--text"><input required type="text" id="text" name="Inputfield - Single Line"  value="" placeholder="Placeholder" /></div></div></div>
(function () {

  function handleSalutationSelect() {
    document.querySelectorAll('.input--button-group').forEach(element => {

      const buttons = element.querySelectorAll('button');
      const input = element.querySelector('input');

      buttons.forEach(button => {
        button.addEventListener('click', event => {
          const { currentTarget } = event;
          buttons.forEach(button => button.classList.remove('field-button--active'))
          currentTarget.classList.add('field-button--active');
          input.value = currentTarget.getAttribute('name');
        })
      });
    });
  }

  function init() {
    handleSalutationSelect();
  }

  document.addEventListener("DOMContentLoaded", init);
})();
Inputfield - Text area
23/02/2021
TeamBank Welt
TeamBank Markenportal 
<div class="module module--form-element">
  <div class="field field--textarea"><label for="textarea">Inputfield - Text area</label><div class="input input--textarea"><textarea rows="7" id="textarea" name="Inputfield - Text area"  value="" placeholder="Placeholder" ></textarea></div></div></div>
(function () {

  function handleSalutationSelect() {
    document.querySelectorAll('.input--button-group').forEach(element => {

      const buttons = element.querySelectorAll('button');
      const input = element.querySelector('input');

      buttons.forEach(button => {
        button.addEventListener('click', event => {
          const { currentTarget } = event;
          buttons.forEach(button => button.classList.remove('field-button--active'))
          currentTarget.classList.add('field-button--active');
          input.value = currentTarget.getAttribute('name');
        })
      });
    });
  }

  function init() {
    handleSalutationSelect();
  }

  document.addEventListener("DOMContentLoaded", init);
})();
Anrede
TeamBank Welt
TeamBank Markenportal 
<div class="module module--form-element">
  <div class="field field--button-group"><label for="f6a51b916d9ad4">Anrede</label><div class="input input--button-group"><input  type="hidden" id="f6a51b916d9ad4" name="Anrede"  value="" /><button type='button' class='field-button' name='Herr'>Herr</button><button type='button' class='field-button' name='Frau'>Frau</button></div></div></div>
(function () {

  function handleSalutationSelect() {
    document.querySelectorAll('.input--button-group').forEach(element => {

      const buttons = element.querySelectorAll('button');
      const input = element.querySelector('input');

      buttons.forEach(button => {
        button.addEventListener('click', event => {
          const { currentTarget } = event;
          buttons.forEach(button => button.classList.remove('field-button--active'))
          currentTarget.classList.add('field-button--active');
          input.value = currentTarget.getAttribute('name');
        })
      });
    });
  }

  function init() {
    handleSalutationSelect();
  }

  document.addEventListener("DOMContentLoaded", init);
})();
Radio Buttons
TeamBank Welt
TeamBank Markenportal 
<div class="module module--form-element">
  <div class="field field--radio"><div class="label">Radiobutton</div><div class="input input--radio"><div class="option"><input  type="radio" id="Radiobutton6a51b916d9c27" name="Radiobutton"  value="Test" /><label for="Radiobutton6a51b916d9c27">Option 1</label></div><div class="option"><input  type="radio" id="Radiobutton6a51b916d9c29" name="Radiobutton"  value="Test" /><label for="Radiobutton6a51b916d9c29">Option 2</label></div></div></div></div>
(function () {

  function handleSalutationSelect() {
    document.querySelectorAll('.input--button-group').forEach(element => {

      const buttons = element.querySelectorAll('button');
      const input = element.querySelector('input');

      buttons.forEach(button => {
        button.addEventListener('click', event => {
          const { currentTarget } = event;
          buttons.forEach(button => button.classList.remove('field-button--active'))
          currentTarget.classList.add('field-button--active');
          input.value = currentTarget.getAttribute('name');
        })
      });
    });
  }

  function init() {
    handleSalutationSelect();
  }

  document.addEventListener("DOMContentLoaded", init);
})();