Add variables in javascript

Question

I am preparing a cart where the pricing derives from the number of items selected in menu. I am using javascript to calculate price on the same page.

function myFunction() {
  var coffee = document.forms[0];
  var txt = 0;
  var i;


  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt = txt++;
    }
  }
  document.getElementById("order").value = txt;
}

<label> Select the project category you will like to float </label>
<div class="form-group">
  <input type="checkbox" name="coffee" value="1">Web Development
  <input type="checkbox" name="coffee" value="1">App Development
  <input type="checkbox" name="coffee" value="1">SEO Ninja
  <input type="checkbox" name="coffee" value="1">The Social media geek
  <input type="checkbox" name="coffee" value="1">Design Wizard
  <input type="checkbox" name="coffee" value="1">The contest of Content
  <input type="checkbox" name="coffee" value="1">Marketing Marathon
  <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
</div>

<input type="button" onclick="myFunction()" value="Add to cart">
<input type="text" id="order" size="50">
<div class="row">
  <div class="form-group">
    <ul class="actions">
      <input type="submit" name="submit3" value="Register">
    </ul>
  </div>
</div>
</form>

Can somebody help me return an integer value (= no. of items checked) with txt.

Do you have more than one form on the page? alert($("form").length) — fdomn-m
– fdomn-m, Commented Mar 3, 2017 at 8:30

Ionut Necula · Accepted Answer · 2017-03-03 09:00:28Z

4

When you use txt = txt++; you are replacing the next value with the old value. You need to use just txt++. Also, I think it's better if you give an id to the form to make sure that you are targetting the right form because ids are/must unique. See the working snippets below please:

function myFunction() {
  var coffee = document.getElementById('cart_form');
  var txt = 0;
  var i;

  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt++;
    }
  }
  document.getElementById("order").value = txt;
}

<form method='post' action='' id='cart_form'>
  <label> Select the project category you will like to float </label>
  <div class="form-group">
    <input type="checkbox" name="coffee" value="3">Web Development
    <input type="checkbox" name="coffee" value="1">App Development
    <input type="checkbox" name="coffee" value="1">SEO Ninja
    <input type="checkbox" name="coffee" value="1">The Social media geek
    <input type="checkbox" name="coffee" value="1">Design Wizard
    <input type="checkbox" name="coffee" value="1">The contest of Content
    <input type="checkbox" name="coffee" value="1">Marketing Marathon
    <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
  </div>

  <input type="button" onclick="myFunction()" value="Add to cart">
  <input type="text" id="order" size="50">
  <div class="row">
    <div class="form-group">
      <ul class="actions">
        <input type="submit" name="submit3" value="Register">
      </ul>
    </div>
  </div>
</form>

As you can see I've also added a opening tag for the form element.

You can run the working snippet from here or you can take a look JSFIDDLE to test it if you want.

An alternative without the old onclick would be too use addEventListener for the click like this:

document.getElementById("add_to_cart").addEventListener("click", function() {
  var coffee = document.getElementById('cart_form');
  var txt = 0;
  var i;

  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt++;
    }
  }
  document.getElementById("order").value = txt;
});

<form method='post' action='' id='cart_form'>
  <label> Select the project category you will like to float </label>
  <div class="form-group">
    <input type="checkbox" name="coffee" value="3">Web Development
    <input type="checkbox" name="coffee" value="1">App Development
    <input type="checkbox" name="coffee" value="1">SEO Ninja
    <input type="checkbox" name="coffee" value="1">The Social media geek
    <input type="checkbox" name="coffee" value="1">Design Wizard
    <input type="checkbox" name="coffee" value="1">The contest of Content
    <input type="checkbox" name="coffee" value="1">Marketing Marathon
    <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
  </div>

  <input type="button" id='add_to_cart' value="Add to cart">
  <input type="text" id="order" size="50">
  <div class="row">
    <div class="form-group">
      <ul class="actions">
        <input type="submit" name="submit3" value="Register">
      </ul>
    </div>
  </div>
</form>

I've seen you tagged this as jQuery too. Here's an alternative using $(":checkbox:checked").length:

$('#add_to_cart').on('click', function(){
  $('#order').val($("#cart_form :checkbox:checked").length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' action='' id='cart_form'>
  <label> Select the project category you will like to float </label>
  <div class="form-group">
    <input type="checkbox" name="coffee" value="3">Web Development
    <input type="checkbox" name="coffee" value="1">App Development
    <input type="checkbox" name="coffee" value="1">SEO Ninja
    <input type="checkbox" name="coffee" value="1">The Social media geek
    <input type="checkbox" name="coffee" value="1">Design Wizard
    <input type="checkbox" name="coffee" value="1">The contest of Content
    <input type="checkbox" name="coffee" value="1">Marketing Marathon
    <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
  </div>

  <input type="button" id='add_to_cart' value="Add to cart">
  <input type="text" id="order" size="50">
  <div class="row">
    <div class="form-group">
      <ul class="actions">
        <input type="submit" name="submit3" value="Register">
      </ul>
    </div>
  </div>
</form>

edited Mar 3, 2017 at 9:00

answered Mar 3, 2017 at 8:25

Ionut Necula

11.6k4 gold badges49 silver badges72 bronze badges

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

11 Comments

Zigsaw Consultancy Over a year ago

@lonut Tried this. It still returns 0

fdomn-m Over a year ago

@ZigsawConsultancy did you try the snippet? it works there, so you must have done something else. Can you elaborate on what you've done?

Rajesh Dixit Over a year ago

@ZigsawConsultancy try txt+=1

Ionut Necula Over a year ago

@ZigsawConsultancy, as someone already said above try and run the snippet, you can see it works. Maybe there is another issue in your code. Can't replicate with the code you provided.

Rajesh Dixit Over a year ago

Just a pointer, you can achieve same result(:checked) without jQuery as well

|

Rajesh Dixit · Accepted Answer · 2017-03-03 08:33:09Z

You do not need a loop just to count number of checkboxes checked.

You can look into querySelectorAll and get only selected checkboxes. Now you just have to check for .length and you have txt value.

var txt = document.querySelectorAll('#frm1 input[name="coffee"]:checked').length;

Note: I have added id attribute to form tag to uniquely get checkboxes.

Sample Code

function myFunction() {
  var txt = document.querySelectorAll('#frm1 input[name="coffee"]:checked').length;
  document.getElementById("order").value = txt;
}

<form id="frm1" method='post' action=''>
  <label> Select the project category you will like to float </label>
  <div class="form-group">
    <input type="checkbox" name="coffee" value="3">Web Development
    <input type="checkbox" name="coffee" value="1">App Development
    <input type="checkbox" name="coffee" value="1">SEO Ninja
    <input type="checkbox" name="coffee" value="1">The Social media geek
    <input type="checkbox" name="coffee" value="1">Design Wizard
    <input type="checkbox" name="coffee" value="1">The contest of Content
    <input type="checkbox" name="coffee" value="1">Marketing Marathon
    <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
  </div>

  <input type="button" onclick="myFunction()" value="Add to cart">
  <input type="text" id="order" size="50">
  <div class="row">
    <div class="form-group">
      <ul class="actions">
        <input type="submit" name="submit3" value="Register">
      </ul>
    </div>
  </div>
</form>

er-han · Accepted Answer · 2017-03-03 08:31:48Z

1

First of all you need to replace txt = txt++ with just txt++ or txt = txt + 1

I also recommend you to use document.getElementsByName('coffee');

Beacuse this guarantees that in the future if you add another input for another purpose, you won't need to change this function.

function myFunction() {
var coffee = document.getElementsByName('coffee');
var txt = 0;
var i;


for (i = 0; i < coffee.length; i++) { 
    if (coffee[i].checked) {
        txt++;
    }
}
document.getElementById("order").value = txt;
}

<label> Select the project category you will like to float </label>
<div class="form-group">
<input type="checkbox" name="coffee" value="1">Web Development 
<input type="checkbox" name="coffee" value="1">App Development 
<input type="checkbox" name="coffee" value="1">SEO Ninja  
<input type="checkbox" name="coffee" value="1">The Social media geek
<input type="checkbox" name="coffee" value="1">Design Wizard 
<input type="checkbox" name="coffee" value="1">The contest of Content 
<input type="checkbox" name="coffee" value="1">Marketing Marathon 
<input type="checkbox" name="coffee" value="1">Recruitment Hackathon 
</div>

<input type="button" onclick="myFunction()" value="Add to cart">
<input type="text" id="order" size="50">

edited Mar 3, 2017 at 8:31

answered Mar 3, 2017 at 8:27

er-han

1,93115 silver badges21 bronze badges

7 Comments

fdomn-m Over a year ago

Needs an explanation

er-han Over a year ago

@freedomn-m I always save the post after inserting a snippet, then edit the post for description:)

er-han Over a year ago

@Rajesh i do this just to make safe the code in the snippet

Rajesh Dixit Over a year ago

@er-han I get that. That's why I did not downvote. But that can attract downvotes. Also FYI, SO syncs content of your answer. Try to partially type answer and refresh page. :-)

fdomn-m Over a year ago

@er-han you might like to add "edit in progress" then as it's not possible to tell if you're adding details or have left it a code-only answer. you might "always" do that, but many people don't and I'm not going to try and remember who does and who doesn't...

|

Collectives™ on Stack Overflow

Add variables in javascript

3 Answers 3

11 Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related