get size of product from tag li without checkbox when submit add to cart

[eluser]teddy[/eluser]
I have small website sell clothes with size is S, M, XL... and they will be show with tag html li a, I want when user click on it the background li will be change and if user click button 'add to cart' I will get of the size was choosen by user before.

Can I do that if not have checkbox for each size of products?

I attached the picture the size of products showed by other website, it changed background when user click on

Thk for reading topic

[eluser]Bart v B[/eluser]
I don't understand your problem.
Within the cart you can set the options right?
So in the array you make something like:

Code:

<?php
$data = array(
               'id'      => 'sku_123ABC',
               'qty'     => 1,
               'price'   => 39.95,
               'name'    => 'T-Shirt',
               'options' => $this->input->post('size')
            );

[eluser]PhilTem[/eluser]
No, you can't do that easily if you don't have a checkbox. I guess, even amazon uses checkboxes that are hidden using JavaScript and show a li-item that is linked to a checkbox.
Keep in mind that only form elements will be submitted when submitting a form, thus no li-items can be submitted as long as they don't have an invisible checkbox connected to them.

PS: I was rethinking my answer, and I guess you can do it with e.g. jQuery but it'll be a hassle since you need to append a post value to a form-submit. Which I've never done and haven't seen code that shows how to do it. But you always have to design your page for people that have JavaScript disabled. And those won't be able to use your page if you just have li-items!

[eluser]teddy[/eluser]
Thank you all guys, my problem is solved, this is my script,

$(document).ready(function(){
$('#kich_co_info li a').click(function(e)
{
var size=$(this).text();

e.preventDefault();
$(this).css({'color':'#F55D2D','font-weight':'bold'});
$("#kich_co_info li a").not(this).css({'color':'#222','font-weight':'normal'});
$.ajax({
url:'http://xyz.com/products/size/',
data:{"size"ize},
type:'post',
success:function(data){ /*alert("second success:"+size);*/ }

})
});

});


At frontend I show details of product with some size like : S, M, L or color of clothes and when users click on it the text or background will be change, that all I want

Above code I can only changed color text of li element (and save text size info to session) but I can't change the background of li element, if someone know how to change background was clicked before there is more choice for me, thank all for reply my topic