CODEWITHSUNDEEP
javascripthtmlforms
Dario B.
Dario B.

Reputation: 149

Get values from checkbox and send them to input text

as you can see in the example, I am trying to extract all the values of the inputs as soon as they are checked and print them in an input text that will be sent by mail. I am at a point that I can not clarify because I can only print the last option in that input and not the three.

I think the bug is that I should capture the results outside the for loop, but I can't see how to do it.

 const groupInput1 = document.getElementsByName('glassLeistung');
 const output = document.getElementById('glassType');
 const go = document.getElementById('go');
 
  go.addEventListener("click", event => {

    for (let i = 0; i < groupInput1.length; i++) {
       if (groupInput1[i].checked) {
           console.log(groupInput1[i].value);
           output.value = groupInput1[i].value + ''
       }

    }
  })

 
<input type="checkbox" class="selected" id="glass" name="glassLeistung"
value="Glass" autocomplete="off">
                                                       
<input type="checkbox" id="rahmen" class="selected" name="glassLeistung"
value="Rahmen" autocomplete="off">
                                                       
<input type="checkbox" id="falzen" class="selected" name="glassLeistung"
value="Falzen" autocomplete="off">



<input type="text" name="glassType-420" value="" size="40"  id="glassType" aria-invalid="false">

<button id="go">go</button>

if someone could help me it would be amazing. Thanks

Upvotes: 1

Views: 207

Answers (2)

DCR
DCR

Reputation: 15665

const groupInput1 = document.getElementsByName('glassLeistung');
 const output = document.getElementById('glassType');
 const go = document.getElementById('go');
 
  go.addEventListener("click", event => {
    output.value=''
    for (let i = 0; i < groupInput1.length; i++) {
       if (groupInput1[i].checked) {
           console.log(groupInput1[i].value);
           output.value = output.value + groupInput1[i].value + ' '
       }

    }
  })
<input type="checkbox" class="selected" id="glass" name="glassLeistung"
value="Glass" autocomplete="off">
                                                       
<input type="checkbox" id="rahmen" class="selected" name="glassLeistung"
value="Rahmen" autocomplete="off">
                                                       
<input type="checkbox" id="falzen" class="selected" name="glassLeistung"
value="Falzen" autocomplete="off">



<input type="text" name="glassType-420" value="" size="40"  id="glassType" aria-invalid="false">

<button id="go">go</button>

Upvotes: 1

n1md7
n1md7

Reputation: 3461

Just added one variable to collect the values and after the loop add them at once.

const groupInput1 = document.getElementsByName('glassLeistung');
 const output = document.getElementById('glassType');
 const go = document.getElementById('go');
 
  go.addEventListener("click", event => {
    const collectHere = [];
    for (let i = 0; i < groupInput1.length; i++) {
       if (groupInput1[i].checked) {
           console.log(groupInput1[i].value);
           collectHere.push(groupInput1[i].value);
       }
    }
    
    output.value = collectHere.join(' - ');
  })
<input type="checkbox" class="selected" id="glass" name="glassLeistung"
value="Glass" autocomplete="off">
                                                       
<input type="checkbox" id="rahmen" class="selected" name="glassLeistung"
value="Rahmen" autocomplete="off">
                                                       
<input type="checkbox" id="falzen" class="selected" name="glassLeistung"
value="Falzen" autocomplete="off">



<input type="text" name="glassType-420" value="" size="40"  id="glassType" aria-invalid="false">

<button id="go">go</button>

Upvotes: 0

Related Questions