each function jquery don't work

398
November 21, 2016, at 6:17 PM

hi I've this html code

<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <link href="stile.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
    <form action="">
        <div>
            <div style="float:left; margin-right:3%">XXX</div>
            <div>
                <input type="text" name="price" id="price" value="2">
            </div>
            <div style="float:left; margin-right:3%">
                <input type="button" name="button" id="button" value="button">
            </div>
        </div>
        <div>
            <div style="float:left; margin-right:3%">YYY</div>
            <div>
                <input type="text" name="price" id="price" value="3">
            </div>
            <div style="float:left; margin-right:3%">
                <input type="button" name="button" id="button" value="button">
            </div>
        </div>
        <div id="total"></div>
        <script src="js/mine.js"></script>
    </form>
</body>
</html>

and the follow js code in the file mine.js

$("#button").each(function() {
    var sum = 0;
    $('#price').each(function() {
        sum += Number($(this).val());
    });
    $('#total').text(sum);
});

I'd like that when I click on button in the div id total it gives me the value of the field price.

So if I click on the first submit button it gives me the value 2 but if after I click on the second button it doesnt do the sum (2+3=5)

Answer 1

You should use class instead of id as jquery id selector (#) only returns one element

https://api.jquery.com/id-selector/

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.

Calling jQuery() (or $()) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element.

Inputs would be

<input type="text" name="price" class="price" value="2">

<input type="button" name="button" class="button" value="button">

In the case of total you can leave the id as you would have one final total

So your code would be something like this

$(".button").each(function() {
    var sum = 0;
    $('.price').each(function() {
        sum += Number($(this).val());
    });
    $('#total').text(sum);
});

UPDATE : If you use this code and click first button it would give 2 and then the other one it would give 5. You can try disabling click handler in order to prevent from adding a second time.

$(document).on("click", ".button", function()
{ 
    var sum = Number($('#total').text());     
    sum += Number($(this).closest("div").parent().find('.price').val());
    $('#total').text(sum);
});

Addenda : Quantity input that increases each time button is pressed

<div>
    <input type="text" name="quantity" class="quantity" value="0">
    <input type="button" class="add-quantity">
</div>
$(document).on("click", ".add-quantity", function()
{ 
    var input = $(this).closest("div").find(".quantity");
    var currentVal = parseInt(input.val());
    $(input).val(currentVal+1);
});
Answer 2

So looking at your code, you've got the following:

<input type="button" name="button" id="button" value="button"></div>
<div><input type="text" name="price" id="price" value="2"></div>
<input type="button" name="button" id="button" value="button"></div>
<div><input type="text" name="price" id="price" value="3"></div>

You've got button and id set twice as id's and you should have unique id's, so when you're check for each element use class= instead of id=.

So if you was to make that change, they would look like the following:

<input type="button" name="button" class="button" value="button"></div>
<div><input type="text" name="price" class="price" value="2"></div>
<input type="button" name="button" class="button" value="button"></div>
<div><input type="text" name="price" class="price" value="3"></div>

Then you would use $('.button') and $('.price') instead of $('#button') and $('#price') for the selectors in JQuery.

I've taken your fiddle and updated it.

Check the following:

JSFIDDLE

UPDATE

After reading your comment, i've updated my jsfiddle and you can now click the two buttons and then have the answer add up to (5)

The reason it was adding up to (5) straight away without you clicking the buttons was because it was doing the .each instead of you having to click the buttons yourself.

So to do this i've used two different classes for the buttons and inputs so they would like the following:

<input type="button" name="button" class="button" value="button"></div>
<div><input type="text" name="price" class="price" value="2"></div>
<input type="button" name="button" class="button1" value="button"></div>
<div><input type="text" name="price" class="price1" value="3"></div>

UPDATED JSFIDDLE

Every click will keep adding the value on to the total number because there no validation to tell the click to stop once it's added up to (5)

UPDATE USING ONE BUTTON

You could even do this, instead of having two buttons, you could just have one button which goes through each of the inputs and adds up the total.

for example:

JSFIDDLE EXAMPLE WITH ONE BUTTON

UPDATE USING TWO BUTTON (Same class names and Validation for 5)

So in the following update (example) it will show you how to get both values using the same class names for both buttons and inputs. It will also show you how to add little validation to stop the adding up once you have 5. So you can't go over 5 (Change it how you like).

JSFIDDLE WITH TWO BUTTONS AND LITTLE VALIDATION

Rent Charter Buses Company
READ ALSO
JQuery - Loop through each case of a class from a point

JQuery - Loop through each case of a class from a point

I am creating a self scrolling, auto updating table and need to search through through elements of a class from a certain point. [nnn]My code currently is this:.

307
Get text from outer span without text of inner elements

Get text from outer span without text of inner elements

I want to extract some text from an HTML element in Selenium and Javascript. .

410
Combobox on ajax returned fields

Combobox on ajax returned fields

Alright, I'm developing a system in which you add rows to a table, then enter data into it and save it. [nnn]I'm using ajax to return the complete table (which has the input tags).

543
The jQuery UI Datepicker doesn&#39;t Appear

The jQuery UI Datepicker doesn't Appear

https://jqueryui. com/datepicker/[nnn]When I use the sourcecode below and paste it into my html file:.

368