Printing multiple variables in the text field using javascript

user_14895049 0
Viewed 323

I created a form using HTML and now I need to show text which user has selected using a checkbox in the text field I tried and it works but it shows only one selected items

can anyone solve this issue so then I can print multiple names in textfield

      function myFun(extras) {
  document.getElementById("check").value = extras;
   
}
<fieldset>
  <legend>Extras</legend>
  <p><label class="choice"> 
  <input type="checkbox" name="extras" value="baby"onclick="myFun(this.value)" > 
  Baby Seat 
 </label></p>
  <p><label class="choice">
  <input type="checkbox" name="extras" value="wheelchair"onclick="myFun(this.value)" >
  Wheelchair Access 
  </label></p>
  <p><label class="choice"> <input type="checkbox" onclick="myFun(this.value)" name="extras" value="tip">
  Stock Tip
  </label></p>
  <input type="text" id="check">
  </fieldset>

strong text

forms css html javascript
3 Answers

We can do it by getting all the choice input elements using document.querySelectorAll().

This returns a NodeList, so used Array.from() to convert into an Array.

Then use Arrays filter method to filter out the unchecked elements and retrieved the values using the Arrays map method.

Finally used the join method to get a comma separated string. You can pass any delimiter of your choice to the join method.

Edit:

Removed the unused function parameter. And renamed the method for better understanding.

References :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

function onChoiceSelection() {
  const choices = Array.from(document.querySelectorAll('.choice input[type="checkbox"]'));
  document.getElementById("check").value = choices.filter(a => a.checked).map(a => a.value).join();

}
<fieldset>
  <legend>Extras</legend>
  <p><label class="choice"> 
  <input type="checkbox" name="extras" value="baby"onclick="onChoiceSelection()" > 
  Baby Seat 
 </label></p>
  <p><label class="choice">
  <input type="checkbox" name="extras" value="wheelchair"onclick="onChoiceSelection()" >
  Wheelchair Access 
  </label></p>
  <p><label class="choice"> <input type="checkbox" onclick="onChoiceSelection()" name="extras" value="tip">
  Stock Tip
  </label></p>
  <input type="text" id="check">
</fieldset>

user_148908510 

function myFun(extras) {
  const value=document.getElementById("check").value
  document.getElementById("check").value = value+" "+extras;
   
}
<fieldset>
  <legend>Extras</legend>
  <p><label class="choice"> 
  <input type="checkbox" name="extras" value="baby"onclick="myFun(this.value)" > 
  Baby Seat 
 </label></p>
  <p><label class="choice">
  <input type="checkbox" name="extras" value="wheelchair"onclick="myFun(this.value)" >
  Wheelchair Access 
  </label></p>
  <p><label class="choice"> <input type="checkbox" onclick="myFun(this.value)" name="extras" value="tip">
  Stock Tip
  </label></p>
  <input type="text" id="check">
  </fieldset>

append the value of the text input to the new value

user_78353300

This example takes the check box items and checks if they are checked and if they are... add it to the list. If you remove the checkbox the item will be removed from the list.

I added classes to the checkboxes class="checkb". Each time you click on the checkbox, the script takes all the elements with this class and checks if they are selected.

Example:

function myFun() {
    var x = document.getElementById("check");
    x.value = '';
    var check = document.getElementsByClassName('checkb');
    for (var i = 0; i < check.length; i++) {
        if (check[i].checked === true) {
            x.value += check[i].value + ' ';
        }
    }
}
<fieldset>
    <legend>Extras</legend>

    <p>
        <label class="choice">
            <input class="checkb" type="checkbox" name="extras" value="baby" onclick="myFun()">
            Baby Seat
        </label>
    </p>
    <p>
        <label class="choice">
            <input class="checkb" type="checkbox" name="extras" value="wheelchair" onclick="myFun()">
            Wheelchair Access
        </label>
    </p>
    <p>
        <label class="choice">
            <input class="checkb" type="checkbox" name="extras" value="tip" onclick="myFun()">
            Stock Tip
        </label>
    </p>
    <input type="text" id="check">
</fieldset>

user_109681340
Related