Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
131 views
in Technique[技术] by (71.8m points)

node.js - Can't get values for multiple checkboxes in html

I have a html table of all the items in in my sql table. Each item has a checkbox that, when selected, is supposed to give the value of the item name to the calculate route when I press the submit button. However, the submit button only submits one checkbox value even if multiple checkboxes are selected. How do I get it to submit the values of all the checkboxes that are selected, not just one checkbox.

<table style="width:100%" class="styled-table">
                <tr>
                <th>Selected</th>
                <th>Amount</th>
                <th>Name</th>
                <th>Typical values</th>
                <th>Unit of typical values</th>
                <th>Calories</th>
                <th>Carbs</th>
                <th>Fat</th>
                <th>Protein</th>
                <th>Salt</th>  
                <th>Sugar</th>
                </tr>

        <tr>
        <% availableFood.forEach(function(food_item){ %>
                <form method="POST" action="/topic7/mid-term/calculate"> 
                        <td><input type="checkbox" name="checkbox[]" value= <%= food_item.name %>></td>    
                        <td><input id="qty" type="text" name="qty" value="1" width="8" style="width: 30px;"/></td>
                        <td><%= food_item.name %></td>
                        <td><%= food_item.typical_values %></td> 
                        <td><%= food_item.unit_of_the_typical_value %></td>
                        <td><%= food_item.calories %></td>
                        <td><%= food_item.carbs %></td>
                        <td><%= food_item.fat %></td>
                        <td><%= food_item.protein %></td> 
                        <td><%= food_item.salt %></td> 
                        <td><%= food_item.sugar %></td>
        </tr>
                        <input type="submit" value="Calculate sum" />
        </form>
<% }) %>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

The problem is with your forEach loop content as it creates and closes your form tag with each iteration making multiple forms having only one checkbox. To confirm check your source code in browser by pressing Ctrl+U

Try putting your form tags outside the forEach loop and putting tr tags insdie forEach loop, like this

<table style="width:100%" class="styled-table">
            <tr>
            <th>Selected</th>
            <th>Amount</th>
            <th>Name</th>
            <th>Typical values</th>
            <th>Unit of typical values</th>
            <th>Calories</th>
            <th>Carbs</th>
            <th>Fat</th>
            <th>Protein</th>
            <th>Salt</th>  
            <th>Sugar</th>
            </tr>

    <form method="POST" action="/topic7/mid-term/calculate"> 
    <% availableFood.forEach(function(food_item){ %>
    <tr>
                    <td><input type="checkbox" name="checkbox[]" value= <%= food_item.name %>></td>    
                    <td><input id="qty" type="text" name="qty" value="1" width="8" style="width: 30px;"/></td>
                    <td><%= food_item.name %></td>
                    <td><%= food_item.typical_values %></td> 
                    <td><%= food_item.unit_of_the_typical_value %></td>
                    <td><%= food_item.calories %></td>
                    <td><%= food_item.carbs %></td>
                    <td><%= food_item.fat %></td>
                    <td><%= food_item.protein %></td> 
                    <td><%= food_item.salt %></td> 
                    <td><%= food_item.sugar %></td>
    </tr>
    <% }) %>
                        <input type="submit" value="Calculate sum" />
        </form>
</table>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...