Solved

Update AJAX get with checkbox values as they get checked/unchecked

Posted on 2013-12-03
5
1,546 Views
Last Modified: 2013-12-03
I am trying to update an interface by checking/unchecking checkboxes so as the user does this the ajax request gets updated to reflect what's only checked

I have working on it's own meaning, I get all the checkboxes with the right values and the AJAX part is working fine (as in manualy)

My first step is to console.log() what I'm checking/unchecking and Im' getting stuck cause I'm only recording the first checkbox checked.

this is my HTML code:
<li>
<input type="checkbox" class="spaceTerm" name="team" value="2011">
</li>
<li>
<input type="checkbox" class="spaceTerm" name="team" value="2012">
</li>
<li>
<input type="checkbox" class="spaceTerm" name="team" value="2013">
</li>
<li>
<input type="checkbox" class="spaceTerm" name="team" value="archive">
</li>
....

Open in new window


This is my js code:

var termString;
$('.spaceTerm').on("click", function(){
	termString += $(this + ':checked').val();
	console.log(termString + " is checked");
});

Open in new window


is not adding or removing values from the string... I guess I'm a little confused on how I should approach this
0
Comment
Question by:vthunder70
[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
  • 3
  • 2
5 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39692911
Not entirely clear what you need. Are you wanting a single string containing all the values that are checked.

Have at look at this fiddle - I've used an array instead of a string as you'll have more flexibility:

http://jsfiddle.net/ChrisStanyon/n9vbL/

If at some point you're going to submit the form, then you'll need to name your checkboxes as an array (with square brackets), otherwise you'll only ever get the last value:

name="team[]"

Then you're receiving script will get an array called team that you can loop through to get the values of those boxes that are ticked
0
 

Author Comment

by:vthunder70
ID: 39692947
The array part makes total sense. The only thing I'm concerned about is that it loops through the whole list every time a box gets clicked.

Wouldn't be better to just push only when one gets checked and search through the array for the one that gets unchecked?

Is this possible?
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39692984
It is possible, but the fastest way to do it is to loop through as I've done. Other wise you would need to run an if/else statement to decide whether to add/remove the value.

Performance really won't be an issue here.
0
 

Author Comment

by:vthunder70
ID: 39693015
I guess I'm splitting hairs... so you are right I don't think performance will be improved by adding/removing values to the array instead of looping through it.

Thank you!
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39693043
No worries. I've been there. Trying to optimize code to such a point that you spend hours writing code only to find out that most humans can't detect a couple of milliseconds difference :)

The each() function in jQuery is already optimized to quickly loop through arrays of elements.

Beside - have you looked into trying to remove an array element by value - not easy!!
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…
Suggested Courses

627 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