How can I best track multiple selections before submitting a form?

I have a page that lists a bunch of items in divs. This list is generated dynamically from a database. My question is two-fold. First, I would like to know how I can click on multiple divs and somehow store the values so I can then insert the data at the end of the page.

Example:

<div id=add>Item Number A</div>
<div id=add>Item Number B</div>
<div id=add>Item Number C</div>

When any div is clicked, a footer appears fixed to the bottom of the screen with an "add selected" button that, when clicked, will insert all selected values into my database.

The main issue I have right now is how to grab and store the values of the clicked divs.

The second part of the question is, if there is a better way of doing this, please let me know.

Thanks in advance.
Count-OrlokAsked:
Who is Participating?
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
This is a start although I think you would be better off with checkbox's  http://jsbin.com/dasekage/1/

We would probably want to add a away to limit how many times something is selected and also remove the selection.  This is why a checkbox would be best.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="addme" id=add1>Item Number A</div>
<div class="addme" id=add2>Item Number B</div>
<div class="addme" id=add3>Item Number C</div>
  <hr>
  <div id="results"></div>
  <input type="text" id="selects" name="selects"><!-- change to type="hidden" -->
</body>
</html>

Open in new window

$(function() {
// change cursor to pointer  
$('.addme').css( 'cursor', 'pointer' );  
var results=[];
$('div.addme').click(function(){
  var r = $(this).text();
  results.push(r);
  $('#results').html('You selected:<br> '+results);
  $('#selects').val(results);
});
});

Open in new window

0
 
Count-OrlokAuthor Commented:
As for your checkbox suggestion, couldn't I just use a hidden checkbox and alter its state by clicking the div? I just think custom on/off buttons look so much nicer than checkboxes, hence my not wanting to use them if at all possible. I will give your solution a quick go and see how it works...
0
 
Count-OrlokAuthor Commented:
Thanks! Works great, but of course now I need additional functionality as you mentioned. Look out for a new question coming soon...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.