Display of selected checkboxes not working in javascript

Question

I would like to display the names of the selected checkboxes when I click Submit.

For example:

If no checkbox is checked display should be "Please select a hobby".
If painting is checked display "#painting"
If painting and reading is checked display "#reading#painting"

The below given code is not working.

function displayHobbies(){
let HobbiesInput=[document.getElementById('dancing'),
document.getElementById('reading'),
document.getElementById('painting')];
var HobbiesError="";
for(var i=0;i<HobbiesInput.length;i++)
{
	if (HobbiesInput[i].checked==false)
	{
            HobbiesError="Please select a hobby";
	}	
	else
	{
	    HobbiesError +="#"+HobbiesInput[i].name;
	}
}
document.getElementById('hobbies_display').innerHTML=HobbiesError;
}

<form name= "myform" onclick="displayHobbies()">

Hobby <input type="checkbox" id="dancing" name="dancing">
  	  <label for="dancing">Dancing</label>
      <input type="checkbox" id="reading" name="reading">
  	  <label for="reading">Reading</label>
  	  <input type="checkbox" id="painting" name="painting">      
  	  <label for="painting">Painting</label>
<button type="button" id="hobby_submit">Submit</button>
</form>
Hobbies:<label id="hobbies_display"></label>

Why is there an onclick on the form tag? Don't you want submit? — epascarello
– epascarello, Commented Feb 11, 2019 at 14:50
First, you should clear out the hobbies_display label every time something is clicked. Second, your for loop doesn't check to see if they're all unchecked to display that message, it checks if any are unchecked. So if the first two are checked, but the last one isn't, it'll look at that last one, see that it's unchecked, and then set the message to say that nothing is checked. — Maclain Anderson
– Maclain Anderson, Commented Feb 11, 2019 at 14:53
@epascarello its supposed to be onclick...I don't want to submit the form — user11017362
– user11017362, Commented Feb 11, 2019 at 15:02
but that is any click inside of the form, not clicking on the button. So submit the form and preventDefault. — epascarello
– epascarello, Commented Feb 11, 2019 at 15:12

laberg · Accepted Answer · 2019-02-11 15:28:13Z

1

Here is something a little bit more clean:

function displayHobbies() {

  let HobbiesInput = [
      document.getElementById('dancing'),
      document.getElementById('reading'),
      document.getElementById('painting')
  ];

  // flag if no hobby is checked
  var noHobbiesChecked = true;

  // reset display area
  document.getElementById('hobbies_display').innerHTML = "";

  for (var i = 0; i < HobbiesInput.length; i++) {

    if (HobbiesInput[i].checked === true)   {
      // add hobby to display area
      document.getElementById('hobbies_display').innerHTML += "#"+HobbiesInput[i].name;
      // turn off the flag since we have at least one hobby checked
      noHobbiesChecked = false; 
    }

  }

  if (noHobbiesChecked === true) {
    // show error
    document.getElementById('hobbies_display').innerHTML = "Please select a hobby";
  }

}

edited Feb 11, 2019 at 15:28

answered Feb 11, 2019 at 15:12

laberg

969 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FZs · Accepted Answer · 2019-02-11 15:15:38Z

0

In your code, if there is an unchecked box, the code will add the "Please select a hobby" message.

Instead, check that at the end, and this will work:

function displayHobbies() {
  let HobbiesInput = [
    document.getElementById('dancing'),
    document.getElementById('reading'),
    document.getElementById('painting')
  ];
  var HobbiesError = "";
  for (var i = 0; i < HobbiesInput.length; i++) {
    if (HobbiesInput[i].checked) {
      HobbiesError += "#" + HobbiesInput[i].name;
    }
  }
  document.getElementById('hobbies_display').innerHTML = HobbiesError || "Please select a hobby";
}

<form name="myform" onclick="displayHobbies()">

  Hobby <input type="checkbox" id="dancing" name="dancing">
  <label for="dancing">Dancing</label>
  <input type="checkbox" id="reading" name="reading">
  <label for="reading">Reading</label>
  <input type="checkbox" id="painting" name="painting">
  <label for="painting">Painting</label>
  <button type="button" id="hobby_submit">Submit</button>
</form>
Hobbies:<label id="hobbies_display"></label>

edited Feb 11, 2019 at 15:15

answered Feb 11, 2019 at 15:04

FZs

18.8k13 gold badges47 silver badges56 bronze badges

1 Comment

FZs Over a year ago

@MegCullen You can accept an answer (by the checkmark), to help the others find better answers

Andrii Stropalov · Accepted Answer · 2019-02-11 15:10:05Z

function displayHobbies() {
let HobbiesInput=[document.getElementById('dancing'),
                  document.getElementById('reading'),
                  document.getElementById('painting')];
var HobbiesError="";

for(var i=0;i<HobbiesInput.length;i++)
{
	if (HobbiesInput[i].checked) {
         HobbiesError +="#"+HobbiesInput[i].name;
	}
}

if (!HobbiesError) {
    HobbiesError="Please select a hobby";
}

document.getElementById('hobbies_display').innerHTML = HobbiesError;
}

<form name= "myform" onsubmit="displayHobbies(); return false;">

Hobby <input type="checkbox" id="dancing" name="dancing">
  	  <label for="dancing">Dancing</label>
      <input type="checkbox" id="reading" name="reading">
  	  <label for="reading">Reading</label>
  	  <input type="checkbox" id="painting" name="painting">      
  	  <label for="painting">Painting</label>
<button type="submit" id="hobby_submit">Submit</button>
</form>
Hobbies:<label id="hobbies_display"></label>

dporechny · Accepted Answer · 2019-02-11 15:10:08Z

0

Here is a snippet for doing this. We are attaching a listener to a form (not to an every input). Then we look if the thing we clicked is actually an input type checkbox. Then if it checked we push it's value to the array we want to display on top, if not checked we are removing from this array. Then we select a element we want to render our list in, and render. Hope it helps.

let values = [];
const form = document.getElementById('form')
form.addEventListener('click', e => {
  if (!e.target.type === 'checkbox') return;
  const value = e.target.value;
  const checked = e.target.checked;
  if (checked) {
    values.push(value)
  } else {
    const newValues = values.filter(v => v !== value);
    values = newValues;
  }
  const valuesList = document.getElementById('valuesList')
  valuesList.innerHTML = values.map(m => `#${m}`).join('')
})

<form id="form">
  <div id="valuesList"></div>
  <div>
    I have a bike
    <input type="checkbox" name="vehicle1" value="Bike">
  </div>
  <div>
    I have a car
    <input type="checkbox" name="vehicle2" value="Car">
  </div>
</form>

answered Feb 11, 2019 at 15:10

dporechny

6465 silver badges12 bronze badges

1 Comment

user11017362 Over a year ago

Thank you for the help!! :)

Collectives™ on Stack Overflow

Display of selected checkboxes not working in javascript

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related