Solved

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

Posted on 2014-02-16
3
157 Views
Last Modified: 2014-02-17
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.
0
Comment
Question by:Count-Orlok
  • 2
3 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 350 total points
ID: 39863548
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
 

Author Comment

by:Count-Orlok
ID: 39865711
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
 

Author Closing Comment

by:Count-Orlok
ID: 39865825
Thanks! Works great, but of course now I need additional functionality as you mentioned. Look out for a new question coming soon...
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now