[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

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

Posted on 2014-02-16
3
Medium Priority
?
172 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 54

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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses
Course of the Month9 days, 18 hours left to enroll

591 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