To sum value of span and one select tag with jQuery-CodePudding

I want to get value of one or more span and just one select tag and get thus the sum and display it in 'total' row when submitting.enter image description here . Final aim is to have the sum of items when selected. I added screenshot of my table.

Thanks in advance.

                if ($('#screen').is(":checked")) {
                        $('#screen_display').html($("#screen").val());
                        $('#price_screen').append("300"); 
                   
                    }
                if ($('#garantie').is(":checked")) {
                        $('#garantie_display').html($("#garantie").val());
                        $('#price_garantie').append("200"); 
                    }
                 if ($('#printer').is(":checked")) {
                        $('#printer_display').html($("#printer").val());
                        $('#price_printer').append("100"); 
                    }
                 if ($('#mouse').is(":checked")) {
                        $('#mouse_display').html($("#mouse").val());
                        $('#price_mouse).append("40"); 
                    }

               <select id="select_price" required>
                    <option value="">Please select price</option>
                    <option value="799"  >799</option>
                    <option value="500"  >500</option>
                    <option value="1200" >1200</option>
                    <option value="1500" >1500</option>
                </select>
           
                <div>
                    <input type="checkbox" id="screen" value = "screen"/>
                    <label for="screen">screen :</label><span id="300" > 300</span><br>
                </div>
                <div>
                    <input type="checkbox" id="garantie" value="garantie"/>
                    <label for="garantie">Garantie :</label><span id="200"  >200</span><br>
                </div>
  <div>
                    <input type="checkbox" id="printer" value="printer"/>
                    <label for="printer">Printer :</label><span id="100"  >100</span><br>
                </div>
               <div>
                <input type="checkbox" id="mouse" value="mouse"/>
                <label for="mouse">Mouse fil :</label><span id="40"  >40</span><br><br>
               </div>

I finalise my project

CodePudding user response：

Something like below should work, you can repeat the process for other span elements

var span1Value = parseInt($("#price_screen").text());    
var span2Value = parseInt($("#price_garantie").text());    
var selectValue = parseInt($("#select_price").find(":selected").val());    

var total = span1Value   span2Value   selectValue;
$('#total').html(total);

CodePudding user response：

enter image description here

@RickyGymmadi

I modified a little, because span class is '.price'. But result is weird

var span1Value = parseInt($(".price").text());      
var selectValue = parseInt($("#select_prix").find(":selected").val());    
var total = span1Value   selectValue;