Question

I’m trying to create a good looking product order form with jquery skills.

I have some shoe size values as like divs:

<div id="select-size">
    <div id="size-value-19">39</div>
    <div id="size-value-20">40</div>
    <div id="size-value-21">41</div>
    <input type="hidden" name="option[229]" id="option-size" value="">
</div>

When a customer clicks on a shoe size numbers it should take the size-value-?? part from div id and put it into #option-size hidden field.
How can I do that?

BTW: I had found a prototypejs example for this work but prototype and jquery can’t work together properly.
Let me give the prototype example code for you:

<script type="text/javascript">
//<![CDATA[
document.observe("dom:loaded", function() {
    function deActivate(elt) {
    elt.removeClassName('active');
    }
    function watchClick(evt) {
    var element = Event.element(evt);
    if (element.hasClassName('outstock')) return;

    $$('#select-size div').each(function(elt) {deActivate(elt)});
    element.addClassName('active');
    var eid = element.id.split('-')[2];
    $('option-size').setValue(eid);
    }
    $$('#select-size div').invoke('observe', 'click', watchClick);
});
//]]>
</script>

I still can’t believe that how js framework developers use same $ sign…

Answer 1

Code presented by OP, translated to jQuery:

$(function() { // On DOM ready ...
    var $sizes = $('#select-size div'), // Size elements
        $input = $('#option-size'); // Hidden input

    $sizes.click(function() { // On click on size element ...
        var $this = $(this); // Reference to this element
        if (!$this.hasClass('outstock')) { // If not out of stock ...
            $sizes.removeClass('active'); // Remove .active on all
            $this.addClass('active'); // Add .active on this

            $input.val(this.id.split('-')[2]); // Set value in hidden field
        }
    });
});

(Updated demo)

On a general note:
You should be able to suppress jQuery’s use of the $ symbol via the .noConflict() setting. However, it is advisable to translate the functionality into jQuery if this library is already present and you have no other use for prototypejs.