JS output all checked input fields values before form submit

Question

I have an order form with several checkbox input fields. I want to show the user the selection made before submitting the form. The js script shown bellow works as intended if the user checks a box the value of that box is showed in the paragraph. The problem is that every additional checked checkbox overrides the previous shown result.

How do I change the script to output all the checked checkbox?

This is the PHP form:

<input type="checkbox" onchange="toggleCheckbox(this)" value="1" name="1">
<input type="checkbox" onchange="toggleCheckbox(this)" value="2" name="2">
<input type="checkbox" onchange="toggleCheckbox(this)" value="3" name="3">
<input type="checkbox" onchange="toggleCheckbox(this)" value="4" name="4">
<input type="checkbox" onchange="toggleCheckbox(this)" value="5" name="5">
<input type="checkbox" onchange="toggleCheckbox(this)" value="6" name="6">
<input type="checkbox" onchange="toggleCheckbox(this)" value="7" name="7">

The JavaScript i use:

<script type="text/javascript"> 
    function toggleCheckbox(element){
        if (element.checked){
        document.getElementById("test").innerHTML = element.value;
        }
        else document.getElementById("test").innerHTML = "";
} 
</script>

The HTML field:

<p id="test"></p>

Possible duplicate of: http://stackoverflow.com/questions/2155622/get-a-list-of-checked-checkboxes-in-a-div-using-jquery — Naruto, Aug 27 '14 at 08:22

Mikhail Timofeev · Accepted Answer · 2014-08-27T08:33:02.433

1

+= not =

    function toggleCheckbox(element){
       if (element.checked)
         document.getElementById("test").innerHTML += " " + element.value;
       else 
         document.getElementById("test").innerHTML = 
            document.getElementById("test").innerHTML.replace(element.value, "");
    }

edited Aug 27 '14 at 08:33

answered Aug 27 '14 at 08:23

Mikhail Timofeev

2,169
15
13

That did the trick. Still, any idea how to change the else part to remove only the item that was unchecked? – CiprianD Aug 27 '14 at 08:28
Top class! Thanks a lot for the quick replies :D – CiprianD Aug 27 '14 at 08:35

JS output all checked input fields values before form submit

1 Answers1