How can I add values to a div based on the checked values in a list?

Take a look at this screenshot...

What I need to do is create a script that goes through all of the checked articles and write the titles of those checked articles into a div and then go back and see how many articles were selected and apply the appropriate discount.

I've seen this done.

What I'm envisioning is a button at the bottom that "totals" all of the checkboxes with a for loop and looks to see which ones have been checked. But after that, I'm lost. How do I create an array or some sort of dynamic that can be appended and then make a calculation based on that appended list?

JQuery or Javascript....

Thanks so much!

JavaScriptjQuery

Last Comment

Member_2_248744

8/22/2022 - Mon

Leonidas Dosas

12/24/2017

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->

<input type="checkbox" />
<p>One</p>
<input type="checkbox" />
<p>Two</p>
<input type="checkbox" />
<p>Three</p>
<button id="myButton">Click</button>
<!-- End your code here -->
  
  <script>
   var myDiv=$('<div></div>');

$('#myButton').on('click',function(){
  $(':checkbox').each(function(){
  if($(this).is(':checked')){
    var a=$(this).next('p');
    console.log(a);
    myDiv.append(a[0]);
  }
  
});
  $('body').append(myDiv);
});
    
  </script>
</body>
</html>

Open in new window

Member_2_248744

12/24/2017

greetings brucegust, , , I read what you said in question, but I am not sure what you say a problem is by -

"ones have been checked. But after that, I'm lost. How do I create an array or some sort of dynamic that can be appended and then make a calculation based on that appended list"

I do not see a problem, as If you get the "Article" title from each checked (in an array) then write titles (from array) to the Order <div>, then you already have a count of articles in the length of the array.

OR

If you just detect the checked an write the title to div, then you can just have a counter variable to add all that were ordered?

Here some code that works in firefox -

<!DOCTYPE html>
<html lang=en><head>
<title>Get Checks and ADD</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<style>
body{background:#fed;}

#avail1 {
font-family: serif;
width: 48em;
padding: 5px;
border: 1px dotted #00b;
}

#avail1 input {
background: #99d;
margin-right:25px;
margin-bottom: 38px;
vertical-align: top;
}

#avail1 span {
display: inline-block;
width: 33em;
vertical-align: top;
}

#avail1 button {
margin: 7px 42px;
vertical-align: top;
}

#ordered {
margin-top:3px;
width: 48em;
padding: 5px;
border: 1px dotted #b00;
}
</style>
</head>
<body>
<h3>Get Checks and ADD</h3>
Order Online by Checking the Article below<br />
$10.00 per Article or $25.00 for Three, or $60.00 for all Nine Articles.
<p id="avail1">
<input type="checkbox" /><span>1 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>2 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>3 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>4 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>5 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>6 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>7 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>8 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>9 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<button>ORDER All Articles Checked !</button>
</p>
Cart-
<p id="ordered">
- - -
</p>
<script>
function id2ob(elmtID){return document.getElementById(elmtID);}
id2ob("avail1").getElementsByTagName("button")[0].onclick = function() {//alert("Button Click");
var cks = id2ob("avail1").getElementsByTagName("input"),sns = id2ob("avail1").getElementsByTagName("span"),cart=[],cost=0,out1='';
for (var c=0;c<cks.length;++c) {
  if(cks[c].checked) {cart.push(sns[c].innerHTML.substr(0, 23));}
  }
if(!cart.length){alert("No Items Checked, NO ORDER"); return}
switch(cart.length) {
  case 9: cost=60; break;
  case 8: cost=70; break;
  case 7: cost=60; break;
  case 6: cost=50; break;
  case 5: cost=45; break;
  case 4: cost=35; break;
  case 3: cost=25; break;
  case 2: cost=20; break;
  case 1: cost=10; break;
  default: cost=0;
  }
if(!cost){alert("No Items Checked, NO ORDER"); return}
out1 += "<b>Your Total Cost for "+cart.length+" Articles is $"+cost+".00</b><br />Articles Ordered -<p>";
for (c=0;c<cart.length;++c) out1 +=cart[c]+"<br />";
id2ob("ordered").innerHTML = out1;
}
</script></body></html>

Open in new window

I did a switch to determine the cost, but you can do the total cost by math, divide number orderd by 3, and multiply that by 25.00 and then multiply the remainder (of t/3) by 10.00.

Bruce Gust

12/25/2017

ASKER

Slick!

What you've recommended is exactly what I need. But rather than cut and paste, let me try to deconstruct what you've done so I can learn what you've done and not just mimic it.

I'm seeing some of it, but there's parts where I'm not connecting the dots.

Your functionality is initiated with a button that's within the <p id="avail1"> paragraph:

id2ob("avail1").getElementsByTag name("button")[0].onclick=function()

But what's "id2ob?" It looks as though you've got a function within a function. How's that playing out? And I don't see where the [0] is coming from. I can see that it will prove handy when you start looping through your <span>'s, but you've got one button. How can you assert an array-esque dynamic onto to a solitary element?

You then set up a var called "cks." I can see where those "looped" values will be coming from in light of you're grabbing all of the "inputs" within the "avail1" id.

What's "sns?" I tried to google that, but I ran into some amazon dynamics and I figured I would just ask Slick.

Hou set up your cart as an empty array, you set up your cost as an integer with a value of 0 and your out1 variable as a string.

You then kick off your for loop for the number of checked boxes. For every checked boxy, you're "pushing" the string connected to each <span> into the cart array.

You're then using the switch you set you to calculate the cost based on the "length" of the cart.

You wrap it up by assigning the the total cost verbiage and value to the "out1" value and then somehow add the titles to the "out1" variable, but I don't see how that's happening.

Could you please explain "sns" and how that's being used to facilitate the above magic?

Thanks!

Also, in the end, I've got to take the selected articles and pass the titles and the cost into two hidden fields that will be processed by a third party shopping cart dynamic. One field will be each of the titles separated by a comma and the other field will be the combined cost based on the number of articles selected. I've got that as a separate question at: https://www.experts-exchange.com/questions/29075354/How-can-I-take-the-selected-values-and-insert-them-into-two-separate-text-fields.html

Thanks!

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

ASKER CERTIFIED SOLUTION

Member_2_248744

12/26/2017

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Bruce Gust

12/26/2017

ASKER

Slick, I'm just now looking at your explanation after having spent some time looking over your solution again and it's validating to see some of what I was able to figure out reinforced by you having broken things down.

Thanks for taking the time to be so thorough. This is what makes this service such a valuable / crucial part of my developer's tool box!

Hope you had a great holiday.

Thanks again!

Member_2_248744

12/26/2017

thanks for the points, and I try and show people HOW do do things here at EE so I don't see so many of the "same old, same old" questions.

I looked at your other question about the hidden Form inputs, and The code by Leonidas Dosas in comment ID: 42415050 looks like it should work and add hiddens to a form.

Just to say, that I used a very very Simple element arrangement for my check inputs and span descriptions, to keep things short, BUT this may be difficult to make it width Responsive. Also there are a thousand very different layouts to get your checks and descriptions displayed, and the script code to run the checks and get the descriptions in those would probably be be very different.