I've been trying to POST data back to a controller from a lightbox using ajax but of course it doesn't work.
I have two select lists, both populated from the default controller. When I select a value and click the submit I have the error box briefly flash up the disappear again.
Using the firebug network tab I can see the POST request however under the post tab there's no data. I must be doing something wrong in the javascript itself but to me it looks ok and all my googling didn't suggest an alternative that worked.
Here's my code...
<body style="background-color: #f0f0f0;">
<div style="margin: 5px;">
<div id="ajax-login-register">
<div id="login-box">
<div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('login')?></div>
<form id="login-form">
<select name="currency_sel" id="brand_country" class="form_select_200px">
<option value="0" selected><i>Select your preferred Currancy</i></option>
<?php foreach($currencies as $currency): ?>
<option value="<?php echo $currency['currency_id']; ?>"><?php echo $currency['currency_name']; ?></option>
<?php endforeach; ?>
</select>
</form>
</div>
<div id="register-box">
<div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('meta_description')?></div>
<form id="register-form">
<select name="language_sel_1" id="brand_country" class="form_select_200px">
<option value="0" selected>Select your preferred Language</option>
<?php foreach($languages as $language): ?>
<option value="<?php echo $language['language_id']; ?>"><?php echo $language['language_name']; ?></option>
<?php endforeach; ?>
</select>
<select name="language_sel_2" id="brand_country" class="form_select_200px">
<option value="0" selected>Select your preferred Language</option>
<?php foreach($regions as $region): ?>
<option value="<?php echo $region['country_id']; ?>"><?php echo $region['country_name']; ?></option>
<?php endforeach; ?>
</select>
<div class="line"> </div>
</form>
</div>
<div>
<form>
<button id="ajax-submit-button" style="font-size: 14px;"><?//=lang('register')?>Submit</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#ajax-login-button').button({
icons: {
primary: "ui-icon-check"
}
});
$('#ajax-submit-button').click(function(){
var error = false;
if(error){
return false;
} else {
$.ajax({
url: "<?=site_url('locale/set_ui_lang')?>",
type: "POST",
dataType: "json",
data: ({
'currency_sel' : $('#currency_sel :selected').val(),
'language_sel_1' : $('#language_sel_1 :selected').val(),
'language_sel_2' : $('#language_sel_2 :selected').val()
}),
success: function(data){
parent.$.colorbox.close();
parent.location.reload();
},
error: function(xhr, ajaxOptions, thrownError){
alert("ERROR! \n\n readyState: " + xhr.readyState + "\n status: " + xhr.status + "\n thrownError: " + thrownError + "\n ajaxOptions: " + ajaxOptions);
}
});
}
});
});
</script>
</body>
When the error notice flags up the ready state and status both come up 0, thrownerror is just error.
Also the receiving controller is currently only just a print_r(&_POST) to test.
I don't seem to be able to get past this myself, if anyone can help it is much appreciated.
Thanks
The keys of your data object should not be in quotes.
It should work (provided the jQuery calls for the values work) when you change it to:
data: {
currency_sel: $('#currency_sel :selected').val(),
language_sel_1: $('#language_sel_1 :selected').val(),
language_sel_2: $('#language_sel_2 :selected').val()
},
Source: jQuery.ajax() documentation
Is it just me or are you making the click event return false instead of firing off AJAX?
var error = false;
if(error){
return false;
}
Your ajax call is in a click handler for a button inside a separate form.
Here's what's happening..
When you click the button, you trigger an ajax call.
The click handler then returns normally and the form that contains the button is submitted.
When that happens a new page loads, and the browser cancels any pending ajax request, which triggers your error. (after you click ok in the error alert, you should notice a normal page load)
To prevent that you can either return false; after your ajax call, or call preventDefault() on the event object:
$('#ajax-submit-button').click(function(e){
e.preventDefault();
/* Rest of the code */
});
This should fix your problem.
*Edit: * note the e parameter on the function definition
You can't multiple IDs with the same name and you selectors are wrong.
$('#currency_sel :selected').val() should be
$('select[name="currency_sel"] option:selected').val() and same for the others.
EDIT
Remove parenthesis of data, it should be
data: {
currency_sel : $('select[name="currency_sel"] option:selected').val(),
language_sel_1 : $('select[name="language_sel_1"] option:selected').val(),
language_sel_2 : $('select[name="language_sel_2"] option:selected').val()
},
Fixed this in combination of Ben & L105. For anyone else with a similar problem here's the working code. div names etc are a bit sketchy, this is still a prototype build...
<body style="background-color: #f0f0f0;">
<div style="margin: 5px;">
<div id="ajax-login-register">
<div id="login-box">
<div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('login')?></div>
<form id="login-form">
<select name="currency_sel" id="currency_sel" class="form_select_200px">
<option value="0" selected><i>Select your preferred Currancy</i></option>
<?php foreach($currencies as $currency): ?>
<option value="<?php echo $currency['currency_id']; ?>"><?php echo $currency['currency_name']; ?></option>
<?php endforeach; ?>
</select>
</form>
</div>
<div id="register-box">
<div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('meta_description')?></div>
<form id="register-form">
<select name="language_sel_1" id="language_sel_1" class="form_select_200px">
<option value="0" selected>Select your preferred Language</option>
<?php foreach($languages as $language): ?>
<option value="<?php echo $language['language_id']; ?>"><?php echo $language['language_name']; ?></option>
<?php endforeach; ?>
</select>
<div class="line"> </div>
</form>
</div>
<div>
<form>
<button id="ajax-submit-button" style="font-size: 14px;"><?//=lang('register')?>Submit</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#ajax-login-button').button({
icons: {
primary: "ui-icon-check"
}
});
$('#ajax-submit-button').click(function(e){
e.preventDefault();
$.ajax({
url: "<?=site_url('locale/set_ui_lang')?>",
type: "POST",
dataType: "json",
data: {
currency_sel:$('select[name="currency_sel"] option:selected').val(),
language_sel_1:$('select[name="language_sel_1"] option:selected').val()
},
success: function(data){
parent.$.colorbox.close();
parent.location.reload();
},
error: function(xhr, ajaxOptions, thrownError){
alert("ERROR! \n\n readyState: " + xhr.readyState + "\n status: " + xhr.status + "\n thrownError: " + thrownError + "\n ajaxOptions: " + ajaxOptions);
}
});
});
});
Related
I'm trying to implement a commenting box with AJAX and PHP (CodeIgniter framework). Here is the code.
The view (HTML code):
<form id="form" method="post">
<div class="input-group" id="input-group"><!-- input group starts-->
<textarea class="form-control" id="Comment" name="Comment" placeholder="Comment on Scenery..." maxlength="300" cols="70" rows="3" required></textarea>
<input type="hidden" id="uploader_id" value="<?php echo $uploader_id ?>"/>
<input type="hidden" id ="scenery_id" value="<?php echo $scenery_id ?>"/>
<button type="submit" id="submit"class="btn btn-info regibutton" >Post</button>
</div>
</form>
<hr/>
<div class="comment-block">
<?php
if ($comment==NULL){
//if no scenery comment echo disclaimer
echo " <ul style = ' margin-left: 0px;padding-left: 0px;'> <li style = 'list-style: none; background-color: #fff; padding : 5px 5px 5px 10px; margin: 5px 5px 5px 5px'>";
echo " No scenery Comments";
echo "</li>
</ul>";
} else {
foreach ($comment as $row){
// if the comments are availabe echo them
echo " <ul style = ' margin-left: 0px;padding-left: 0px;'> <li style = 'list-style: none; background-color: #fff; padding : 10px 5px 5px 10px; margin: 5px 5px 5px 5px'>";
echo $row->Comment;
echo "<br/>";
echo "<p style='font-size: 11px; color:#333; padding-top: 5px;'>".date(" D d M Y - H:i:s ",strtotime($row->Date_posted))."By - ". $row->Username. " </p>";
echo $row->Date_added;
echo "</li>
</ul>";
}
}
?>
</div>
The AJAX code:
<script>
$(document).ready(function(){
$('#submit').click(function(e){
// remove the error class
$('.input-group').removeClass('has-error');
//remove the previous
$('.help-block').remove();
var Comment = $('#Comment').val();
var scenery_id = $('#scenery_id').val();
var uploader_id = $('#uploader_id').val();
var datastring = 'Comment'+Comment+'&scenery_id'+scenery_id+'&uploader_id'+uploader_id;
$.ajax({
type:'POST',
url: "<?php echo base_url('display_scenery/add_comment')?>",
data: datastring,
datatype: 'json',
cache: 'false',
encode: true
});
.done(function(data) {
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
if(!data.success){
$('#data.errors.input-group'){
$('#iput-group').addClass('has-error');
$('#iput-group').append('<div class= "help">' + data.errors.Comment+'</div>');
} else {
$('#form').append('<div class="alert">'+ data.message+'</div>');
}
)};
.fail(function(data) {
// show any errors
// best to remove for production
console.log(data);
});
}*/
// prevent default action
e.preventDefault();
});
});
</script>
The back end code in CodeIgniter:
public function add_comment(){
if(!$this->session->userdata('logged_in')) {
$data['error'] = 'Signup needed to comment on a scenery';
} else {
$this->load->library('form_validation');
$session_data = $this->session->userdata('logged_in');
$User_id= $session_data['User_id'];
$scenery_id = $_POST['Scenery_id'];
$Comment=$_POST['Comment'];
$this->form_validation->set_rules('Comment', 'Comment', 'trim|required');
if($this->form_validation->run() == FALSE) {
$data['error'] = validation_errors();
} else {
//loads the model image_display then redirects to scenery page
$this-> image_display->add_comment( $scenery_id,$User, $Comment);
$data['Comment']=$this-> image_display->get_comments($scenery_id);
$data['success'] = TRUE;
}
}
echo json_encode($data);
}
I want a system where the user can comment and the comments can be displayed. I'm trying to locate why the code is not working,kindly assist, I'm relatively new to AJAX.
try this :
<script>
$(document).ready(function(){
$('#submit').click(function(e){
// remove the error class
$('.input-group').removeClass('has-error');
//remove the previous
$('.help-block').remove();
var datastring = $("#form").serialize();
$.ajax({
type:'POST',
url: "<?php echo base_url('display_scenery/add_comment')?>",
data: datastring,
datatype: 'json',
cache: 'false',
encode: true
});
.done(function(data)
{
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
if(!data.success){
$('#data.errors.input-group'){
$('#iput-group').addClass('has-error');
$('#iput-group').append('<div class= "help">' + data.errors.Comment+'</div>');
}
else
{
$('#form').append('<div class="alert">'+ data.message+'</div>');
}
)};
.fail(function(data) {
// show any errors
// best to remove for production
console.log(data);
});
}*/
// prevent default action
e.preventDefault();
});
});
</script>
I have in defi.php a form with the following AJAX call:
$('#def').submit(function (event) {
var data = $(this).serialize();
$.post('defidos.php', data)
.success(function (result) {
$('#dos').html(result);
})
.error(function () {
console.log('Error loading page');
})
return false;
});
defidos.php has the following table row which contains a check box:
<tr>
<td>
<input type="checkbox" name="seleccion[]" value="<?php echo $id_plantilla; ?>" />
</td>
<td>
<?php echo $faquerynm['cve_plaza']; ?>
</td>
<td>
<?php echo $desc_cat; ?>
</td>
<td>
<?php echo $faquerynm['tiempo']; ?>
</td>
<td>
<?php echo $faquerynm['situacion']; ?>
</td>
<td>
<?php echo $div_areal; ?>
</td>
</tr>
After the call the checkbox is not shown.
If I put the checkbox outside the table it shows correctly.
I solved the problem using css , creating the table with divs .
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
text-align: center;
}
.titulos {
font-weight: bold;
}
With this the checkbox shows correctly
I was redirecting to new page start.php and passing variable in this way:
window.location.href = 'start.php?&userid=+ userid;`
Can I do it in this way:
$.post('start.php',{userid: userid});
window.location.href = 'start.php';
I dont want to use GET and Form submit.
Because on same page there are other processes which already post data to other page.
I tested above but on start.php it says var is not defined
UPDATE
start.php
<?php
$user_id=$_GET['userid']; //When I use GET
?>
<?php
$user_id=$_POST['userid']; //When I use POST
?>
login.php
<html>
<head>
<title>ThenWat</title>
<link href="css/button.css" rel="stylesheet" type="text/css">
<link href="css/rateit.css" rel="stylesheet" type="text/css">
<script src="//connect.facebook.net/en_US/all.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.rateit.js" type="text/javascript"></script>
<style>
.header{
background-color:#0B6121;
border:2px solid #0B6121;
padding:10px 40px;
border-radius:5px;
}
.middle{
background-color:Yellow;
}
.left{
background-color:Green;
}
.url{
box-sizing: border-box;
display: block;
}
.url:hover {
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
}
html, body { margin: 0; padding: 0; border: 0 }
</style>
</head>
<body>
<div class="header" style="">
<table style="">
<tr>
<td><img src= "3.png" height="50" width="310"/></td>
</tr>
</table>
</div>
<table border="0" width="100%">
<tr>
<div class="middle">
<td style="width:40%">
<input type="button" id="loginButton" class="button" onclick="authUser();" value="Login | ThanWat" style="display:none; left:500px; position:relative"/>
<lable id="lable1" style="display:none;" ><i> Please wait .. </i> </lable>
<div class="rateit bigstars" id="rateit99" data-rateit-starwidth="32" data-rateit-starheight="32" style=" position:relative; top:-30px; display:none; left:300px" >
</div>
</td>
</div>
</tr>
</table>
<div id="fb-root"></div>
<script type="text/javascript">
var userid;
FB.init({
appId: '1412066',
xfbml: true,
status: true,
cookie: true,
});
FB.getLoginStatus(checkLoginStatus);
function authUser()
{
FB.login(checkLoginStatus, {scope:'email'});
}
function checkLoginStatus(response)
{
document.getElementById('lable1').style.display = 'block';
if(response && response.status == 'connected')
{
FB.api('/me?fields=movies,email,name', function(mydata)
{
console.log(mydata.email);
console.log(mydata.id);
userid=mydata.id;
var name=mydata.name;
//alert(name);
var email=mydata.email;
var json = JSON.stringify(mydata.movies.data);
var a = JSON.parse(json);
var picture="https://graph.facebook.com/"+userid+"/picture?type=small";
// alert(picture);
$.post('user_record.php',{'myd':a, name: name, email: email, userid:userid, picture:picture}, function(data)
{
window.location.href = 'start.php?userid='+userid;
});
});
console.log('Access Token: ' + response.authResponse.accessToken);
}
else
{
document.getElementById('lable1').style.display = 'none';
document.getElementById('loginButton').style.display = 'block';
}
}
</script>
</body>
</html>
UPDATE2
$.post('user_record.php',{'myd':a, name: name, email: email, userid:userid, picture:picture}, function(data)
{
var $form = $("<form id='form1' method='post' action='start.php'></form>");
form.append('<input type="hidden" name="userid" value="'+userid+'" />');
$('body').append($form);
window.form1.submit();
});
start.php
<?php
$user_id=$_POST['userid'];
echo $user_id;
?>
Here is a solution that worked for me. You need to add a new form using jquery after your first ajax response and then submit this form using javascript.
<script>
$.post('user_record.php',{'myd':a, name: name, email: email, userid:userid, picture:picture}, function(data){
var $form = $("<form id='form1' method='post' action='start.php'></form>");
$form.append('<input type="hidden" name="userid" value="'+data+'" />');
$('body').append($form);
window.form1.submit();
});
</script>
Please modify it according to your requirement. Hope this helps
Hi I am facing some problems in submitting form without refreshing, I know that it has something to do with "return false " but i just dont know where and how to use it. I tried refreshing the page by placing it in (if there are errors) but it just doesnt seem to work. Can you guys help me out??
<?php
$message = '';
$errors = array();
$noErrors = true;
$haveErrors = !$noErrors;
require_once('validations/tradeformresult.php');
if ($noErrors && $userArriveBySubmittingAForm) {
require_once('price.php');// INSERTION
echo "<script type='text/javascript'>\n";
echo "</script>";
echo "<script type='text/javascript'>\n";
echo "alert('Trade is successfully executed!');\n";
echo "</script>";
///////////MESSAGE/////////////////
}
elseif ($haveErrors && $userArriveBySubmittingAForm) {
echo "<script type='text/javascript'>\n";
echo "alert('Please re-enter your parameters.');\n";
echo "return false";
echo "</script>";
}
else if ($userArriveByClickingOrDirectlyTypeURL) { // we put the original form inside the $message variable
$newTitle = 'The link is broken';
$h1Title = '';
$message = '';
}
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
</script><head><meta charset="UTF-8"></head>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: relative;
z-index: 3;
p.padding;
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
margin: 150px auto 0px auto;
border: 3px solid blue;
outline: 3px solid darkblue;
width: 500px;
height: 500px;
overflow:auto;
background: #FFF;
color: #000;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
</style>
<script type="text/javascript">
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
</script>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox" style="display:none">
<script>
</script>
<p>Create Order
<p><?php
$timestamp=time(); require_once 'start.php';
?>
<form method="post" name="formSubmitted" **return false;"**>
<input type="hidden" name="formSubmitted" value="true" runat="server">
<?php echo $message; ?>
<?php ?>
<?php if ($haveErrors || $userArriveByClickingOrDirectlyTypeURL) : ?>
<fieldset>
<p>Symbol : <select name = "selection" id="selection">
<option disabled = "disabled" selected = "selected"> Choose one </option>
<option value="eur/usd"<?php If($selection=='eur/usd'){Echo 'selected';}?>>EUR/USD</option>
<option value="usd/jpy"<?php If($selection=='usd/jpy'){Echo 'selected';}?>>USD/JPY</option>
<option value="usd/cad"<?php If($selection=='usd/cad'){Echo 'selected';}?>>USD/CAD</option>
<option value="eur/jpy"<?php If($selection=='eur/jpy'){Echo 'selected';}?>>EUR/JPY</option>
<option value="eur/chf"<?php If($selection=='eur/chf'){Echo 'selected';}?>>EUR/CHF</option>
<option value="gbp/usd"<?php If($selection=='gbp/usd'){Echo 'selected';}?>>GBP/USD</option>
<option value="aud/usd"<?php If($selection=='aud/usd'){Echo 'selected';}?>>AUD/USD</option>
<option value="usd/chf"<?php If($selection=='usd/chf'){Echo 'selected';}?>>USD/CHF</option>
</select><font color="red"><?php echo $selectionError?></font>
<p> Date : <input type="datetime" value="<?php echo date("Y-m-d ",$timestamp); ?>"READONLY name="date"/></p>
<p> Type : <input type="radio" name="type" value="buy"<?php if ($type == 'buy') echo 'checked'; ?>CHECKED> Buy <input type="radio" name="type" value="sell" <?php if ($type == 'sell') echo 'checked'; ?>>Sell<font color="red"><?php echo $typeError;?></font></p>
<p> Size : <input type="number"pattern="[0-9]+([\.|,][0-9]+)?" step="0.01"min="0"name="size"value="<?php echo $size;?>"/><font color="red"><?php echo $sizeError?></font></p>
<p> Bid Price (Sell) : <input id="bidprice" READONLY name="bidprice" type="text" value="<?php echo $bidprice;?>"/><font color="red"><?php echo $bidpriceError?></font></p>
<p> Offer Price (Buy) :<input id="offerprice" READONLY name="offerprice" type="text" value="<?php echo $offerprice;?>"/><font color="red"><?php echo $offerpriceError?></font> </p>
<p> Stop Loss : <input type="number"step="any"min="0" name="stoploss" value="<?php echo $stoploss;?>"/><font color="red"><?php echo $stoplossError?></font></p>
<p> Take Profit : <input type="number"step="any"min="0"name="takeprofit"value="<?php echo $takeprofit;?>"/><font color="red"><?php echo $takeprofitError?></font></p>
</fieldset>
<div align="center">
<input type="submit" value="Submit" Onsubmit =**"return false"**;/><button onmousedown="toggleOverlay()">Close </button>
</div>
<input type="reset" name="Reset" value="Reset" tabindex="50">
<?php endif; ?>
</form>
</script>
</body>
</html></p>
</div>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<h2>Trade</h2>
<button onmousedown="toggleOverlay();**return false;"**>Create Order</button>
</div>
<!-- End Normal Page Content -->
</body>
</html>
<?php
?>
Unless you are using AJAX, you can't really do this from PHP. Once a form submits, that's it. Simple validation can be done in the browser. Bind a validation function to your form's submit event. That's the thing you return false or true from.
(You would of course validate again on the server.)
It looks from your code like you're trying to run some php code (tradeformresult.php). Loading it this way isn't going to work as expected-that require_once will be run as the page is being built in PHP, not in the browser.
For sending a form without refreshing the page, you should look into AJAX (http://en.wikipedia.org/wiki/Ajax_(programming))
JQuery has a good AJAX method. Here is a simple example of how to use it:
$.ajax({url:"http://www.someserver.com/api/path",
data:{val1:"value",val2:"value"})
.success(function(returnData) {
console.log(returnData);
});
The above will call the given URL with the given data as parameters, then, if successful, will return whatever data the server gave back into the returnData variable.
If you're using AJAX, you don't really even have to use a <form> tag, since you'll be building the query string manually. You can have the function that makes the AJAX call be triggered from the onClick event of a button.
There is a list of checkboxes. User clicks on image of a "unchecked checkbox". Ajax sends request to php script which updates database and echo's new image source of a "checked checkbox". This works fine, and is below:
HTML:
<img src="<?php echo ( $box->complete == 1 ) ? "/images/checkbox-filled.png" : "/images/checkbox-empty.png" ?>" id="checkbox-<?php echo $box->id ?>" />
markBox.js:
$.ajax( {
type: "POST",
url: "/scripts/markBox.php",
data: data,
cache: false,
success: function( imageSource ) {
image.attr( 'src', imageSource );
}
} );
markBox.php:
//Return result
if ( $box->complete == 1 )
echo "/images/checkbox-filled.png";
else
echo "/images/checkbox-empty.png";
exit;
The challenge is that I have php function that is called earlier, above the list of checkboxes, to display to user how boxes are checked and how many are not. I want this box to be called and refresh as the image does. How do I rerun the php function to run again once the ajax comes back?
HTML:
<div class="markBox"><?php echo $results->getCountComplete() ?> Complete</div>
<div class="markBox"><?php echo $results->getCountNotComplete() ?> Incomplete</div>
you don't need ajax at all: (unless you don't want to store your data to a database or a file): I hope this helps:
http://jsfiddle.net/teeEx/
HTML:
<span class="checked"> </span>
<span class="unchecked"> </span>
<span class="unchecked"> </span>
<div id="result"></div>
CSS:
a{
text-decoration: none;
}
span{
display: block;
width: 30px;
height: 30px;
margin: 20px;
}
span.checked{
background: green;
}
span.unchecked{
background: black;
}
JS:
$('a').click(function(){
var a_obj = $(this);
var obj = a_obj.children('span');
if( obj.is('.checked')){
obj.removeClass('checked').addClass('unchecked');
} else {
obj.removeClass('unchecked').addClass('checked');
}
var all = a_obj.parent();
var countChecked = all.find('span.checked').length;
var countunChecked = all.find('span.unchecked').length;
$('#result').html('checked '+countChecked+'; unckecked: '+countunChecked);
});