Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-02-16
3
Medium Priority
?
167 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 1400 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…

722 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