Get values from multiple inputs jQuery with same name and add the the values together

Question

Image of the appending of items using jQuery

function fill(thisValue) {
    function suggest(inputString) {
        var inputString = $.trim(inputString);
        if(inputString.length == 0) {
            $('#suggestions').fadeOut('slow');
        } else {
            $('#country').addClass('load');
            $.post("<?php echo base_url();?>customer/get_item_list", {queryString: "" + inputString + ""}, function(data) {
                if(data.length >0) {
                    $('#suggestions').fadeIn();
                    $('#suggestionsList').html(data);
                    $('#country').removeClass('load');
                } else {
                    $("#scan_box").val("");
                }
            });
        }
    }

    var MaxInputs = 15; //maximum input items allowed
    var x = 0;
    var FieldCount = 0; //to keep track of text box added

    function fill(thisValue) {
        setTimeout("$('#suggestions').fadeOut();", 1000);
        $("#scan_box").val("");
        data = thisValue.split('-');
        $('#item_code').val(data['0']);
        $('#item_name').val(data[1]).css('font-weight','bolder');
        $('#cost_price').val(data[2]);
        $('#item_code_code').val(data['0']);
   
        if(x <= MaxInputs) { //max input box allowed
            FieldCount++;
            $('#pos-tbbody').append('<tr id="tr" style="font-weight:bolder"><td>'+data[1]+'</td><td><input type="hidden" required id="item_code" name="item_code[]" value="'+data['0']+'"><input type="text" size="20" value="'+data[2]+'" style="width:100px" name="cost_price[]"></td><td><input type="number" class="qty" style="width:70px"  value="1" name="qty[]" onclick="multiply(this.value)" onkeydown="multiply(this.value)" onkeyup="multiply(this.value)" ></td> <td></td> <td class="text-center"><div class="btn-group btn-group-xs"><a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-danger removeclass"><i class="fa fa-times"></i></a></div></td></tr>');
            x++;
        }
        return false;
    }

    function multiply(qty_value) {
        var total = data[2] * qty_value;
        //$('.total_amount').text(total);
        $("#amount_tendered").val(total);
        return total;
    }
    $(document).ready(function() {
        $('#pos-tbbody').on("click", ".removeclass", function(e) { //user click on remove text
            if(x >= 1) {
                $('#tr').remove();
                x--;
            }
            return false;
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<div> 
    <table>
        <tr>
            <td><label class="control-label">Search</label></td>
            <td><input type="text" style="background-color:#EAEDF1;font-size:1.2em;font-weight:bolder" onkeyup="suggest(this.value);" onkeydown="suggest(this.value);" name="item_search" class="form-control" size="80"  placeholder="Start Typing item's or Scan barcode" id="scan_box" onblur="fill();"/></td>
        </tr>
    </table>
    <div class="col-md-9 suggestionsBox" id="suggestions" style="display:none; cursor:pointed;z-index:2000px ;display: block; position: absolute; ">
        <p class="suggestionList" id="suggestionsList" style="z-index:2000px ;cursor:pointed"> &nbsp; </p>
    </div>	
    <div class="table-responsive" style="height:22em;overflow:scroll">
        <table class="table table-vcenter table-hover table-striped table-bordered ">
            <thead style="padding:10px">
                <tr style="background-color:#563D7C;color:#fff;">
                    <th class="text-center" style="width: 150px;">Item </th>
                    <th>Price</th>
                    <th>Qty.</th>
                    <th>Total</th>
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody id="pos-tbbody">
            </tbody>
            </thead>
        </table>
    </div>
    <input type="submit" value="Save" class="btn btn-success btn-block btn-sm btn-raised" name="save_item_recieve">				
</div>

setTimeout("$('#suggestions').fadeOut();", 1000); 

$("#scan_box").val("");
data = thisValue.split('-');  

$('#item_code').val(data['0']);
$('#item_name').val(data[1]).css('font-weight','bolder');
$('#cost_price').val(data[2]);
$('#item_code_code').val(data['0']);    

if(x <= MaxInputs) //max input box allowed
{   
    FieldCount++; 

    $('#pos-tbbody').append('<tr id="tr" style="font-weight:bolder">

    <td>'+data[1]+'</td>

    <td><input type="hidden" required id="item_code" name="item_code[]" value="'+data['0']+'"><input type="text" size="20" value="'+data[2]+'" style="width:100px" name="cost_price[]"></td>

    <td><input type="number" class="qty" style="width:70px"  value="1" name="qty[]" onclick="multiply(this.value)" onkeydown="multiply(this.value)" onkeyup="multiply(this.value)" ></td> 

    <td></td> <td class="text-center"><div class="btn-group btn-group-xs"><a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-danger removeclass"><i class="fa fa-times"></i></a></div></td>

    </tr>'); 

    x++;    
}
    return false;    

}

i can do that with php but i dont know how to go about it using jquery.. — Isaac Gyasi
– Isaac Gyasi, Commented Oct 22, 2015 at 13:11

epascarello · Accepted Answer · 2015-10-22 13:19:25Z

1

Basic idea. Select the elements and loop over them.

function addUp(){
    var cnt = 0;  
    $("[name='theName']").each(function() {
        cnt += Number(this.value);
    });
    $("#total").val(cnt);
}
$("[name='theName']").on("change", addUp);
addUp();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="theName" value="1" />
<input type="text" name="theName" value="1" />
<input type="text" name="theName" value="1" />
<input type="text" name="theName" value="1" />
<input type="text" name="theName" value="1" />
<label for="total">Total:</label><input type="text" id="total">

answered Oct 22, 2015 at 13:19

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

2 Comments

Isaac Gyasi Over a year ago

The addition of the values is working on an event now. as u can see in my codes i have number form element as a quantity which i specify for each item i append to DOM page. I will like to multiply the specified quantity value to the unit price for each item before i get the total value to the cost .

Isaac Gyasi Over a year ago

Am trying to create point of sales for a stock system that am working on . As soon us an item is searched it comes with it unit price and default quantity which has a value of 1.the values of the unit price and quantity are put into form element with the name costprice[] and qty[] respectively...I really need to solve this problem my project manager is on my neck.

Collectives™ on Stack Overflow

Get values from multiple inputs jQuery with same name and add the the values together

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related