CODEWITHSUNDEEP
javascripthtmlcssforms
Dhruv Parmar
Dhruv Parmar

Reputation: 11

Printing multiple variables in the text field using javascript

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

Upvotes: 1

Views: 821

Answers (3)

sbfdes
sbfdes

Reputation: 36

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>

Upvotes: 1

54ka
54ka

Reputation: 3589

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>

Upvotes: 0

IAMSTR
IAMSTR

Reputation: 684

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

Upvotes: 0

Related Questions