-1

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)

Improve this question
1
  • 4
    id should be unique all the time use class Commented Sep 23, 2015 at 11:50

2 Answers 2

Reset to default
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);
});
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thank you very much but when now i'm clicking on button it gives to me directly the sum (5)...i'd like to arrive to 5 clicking the 2 buttons
updated my answer, please let me know if you have any more issues
thank you very much Daniel!!it works fine!ive another question if you can help me...suppose i'd like to add another input "quantity" that starts with value="0"...every time I click on button the value of input quantity increase....so if i click button 3 times quantity value goes to 3...how can I do?
updated my answer to include this, hope it helps, have a good day
Hello Daniel , maybe I explained badly . I'm okay with the php code you've already made ​​to the tune and I would need a simple implementation . Clicking on the " button " as well as increasing the " total" in a new field " quantity" should be a number ( progressive ) . I hope I was clear . Sure of your help I thank you again
|
0

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

Improve this answer

5 Comments

Thank you very much but when now i'm clicking on button it gives to me directly the sum (5)...i'd like to arrive to 5 clicking the 2 buttons
@piccolopasticcio check my updated answer, sorry about that.
thanks very much Chris...unfortunately I understand that i must have unique id if I want to do what i think:-(
@piccolopasticcio if you check my updated answer, I've updated the jsfiddle to show you how you can do it with one button click
@piccolopasticcio Check my updates, I've provided you with multiple ways . Hope this gives you an idea on how to do button clicks and getting values from inputs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.