Search code examples
javascriptonclickonload

Pass value of input to other input without onclick


I have a working code to pass value from one id to another, but to do that I need a button to pass it onclick. I want to pass the value without a button directly to the other input. As I did my research i just saw onclick solutions.. Is there any other way or am I stuck with this option

My Code:

window.onload = function() {
    document.getElementById('button').onclick = function() {
        document.getElementById('email2').value = document.getElementById('email').value;
        document.getElementById('firma2').value = document.getElementById('firma').value;
        document.getElementById('name2').value = document.getElementById('name').value;
        document.getElementById('nummer2').value = document.getElementById('nummer').value;

    }
};

Solution

  • Try this solution:

    const textInput = document.querySelector('#text');
    const checkboxInputs = document.querySelectorAll('[id^=checkbox]');
    const secondInput = document.querySelector('#second');
    const thirdInput = document.querySelector('#third');
    
    textInput.addEventListener('input', (e) => {
      secondInput.value = e.target.value;
    })
    
    textInput.addEventListener('change', (e) => {
      thirdInput.value = e.target.value;
    })
    
    const checkboxesSet = new Set();
    
    checkboxInputs.forEach(checkboxInput =>
      checkboxInput.addEventListener('change', (e) => {
        const label = document.querySelector(`label[for=${e.target.id}]`).innerText;
        
        checkboxesSet[e.target.checked ? 'add' : 'delete'](label);
        
        const text = [...checkboxesSet].join(', ');
    
        secondInput.value = text;
        thirdInput.value = text;
      })
    )
    <label for="text">Text input</label>
    <input id="text">
    <br/>
    <label for="checkbox1">Checkbox input 1</label>
    <input id="checkbox1" type="checkbox">
    <br/>
    <label for="checkbox2">Checkbox input 2</label>
    <input id="checkbox2" type="checkbox">
    <br/>
    <label for="second">While typing</label>
    <input id="second">
    <br/>
    <label for="third">At the end</label>
    <input id="third">