1

i am trying to output form values with inner.html I got 2 problems with my checkboxes: 1. if i check more then 1 checkbox, only one is outputted 2. if no checkbox is checked, the input from other fields are also not outputted How can i fix this problem?

<script>function changeText(){
var userInputname = document.getElementById('name').value;
var userInputcolor = document.querySelector('.color:checked').value;

document.getElementById('output1').innerHTML = userInputname;
document.getElementById('output2').innerHTML = userInputcolor;
return false;
}
</script>

<form method="get" onsubmit="return changeText()">        
<input type="text" name="name" id="name" />        
<br /><br />
<input type="checkbox" name="color" class="color" value="green">Green<br />
<input type="checkbox" name="color" class="color" value="yellow">Yellow<br />
<input type="checkbox" name="color" class="color" value="red">Red<br />
<input type="checkbox" name="color" class="color" value="blue">Blue<br />
<br /><br />
<input type="submit" value="Output" />
<br /><br />
<b id='output1'></b><br />
<b id='output2'></b><br />
Improve this question
8
  • 3
    And why do all the checkboxes have the same name? Commented Apr 25, 2014 at 13:51
  • 1
    @adeneo It is fine to have multiple elements with the same name, but not with the same id. Commented Apr 25, 2014 at 13:52
  • 1
    @adeneo - Checkboxes with the same name don't necessarily present a problem... Commented Apr 25, 2014 at 13:52
  • i should give them different names each? Commented Apr 25, 2014 at 13:52
  • 3
    @chris97ong - mostly because most serverside languages won't receive multiple values when more than one checkbox is checked, so it's not something you see very often, unless it's for radio buttons or the name is something like name[], that many serverside languages understands as an array. Commented Apr 25, 2014 at 13:55

1 Answer 1

Reset to default
1

document.querySelector only gets one single element, the first one encountered, you'd use document.querySelectorAll to get all matching elements, and you can convert that to an array and use map to return a concantenated string of the values, like this :

<script>function changeText(){
var userInputname = document.getElementById('name').value;
var userInputcolor = Array.prototype.slice.call(document.querySelectorAll(".color:checked")).map(function(el) {
        return el.value;
    }).join(', ')

document.getElementById('output1').innerHTML = userInputname;
document.getElementById('output2').innerHTML = userInputcolor;
return false;
}
</script>

<form method="get" onsubmit="return changeText()">        
<input type="text" name="name" id="name" />        
<br /><br />
<input type="checkbox" name="color" class="color" value="green">Green<br />
<input type="checkbox" name="color" class="color" value="yellow">Yellow<br />
<input type="checkbox" name="color" class="color" value="red">Red<br />
<input type="checkbox" name="color" class="color" value="blue">Blue<br />
<br /><br />
<input type="submit" value="Output" />
<br /><br />
<b id='output1'></b><br />
<b id='output2'></b><br />

FIDDLE

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

1 Comment

Awesome! That's just what i wanted to make possible. Thanks very much for support

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.