Posting Javacript Variable during Form Submission

[mbarandao]

Hello All:

I am using a div to simulate a checkbox effect; thus, with each click of the div, my jquery displays a different option (in my case: whether the user wants to select a Monthly or Yearly Subscription).

The Jquery code:

$(document.body).ready(function () {
    $(function () {

      var main_obj_id = 'on_off';
      var on_class = 'on_off_on';// means Monthly
      var off_class = 'on_off_off';  //means Yearly      

        $('#' + main_obj_id).click(function () {
              if ($(this).is('.' + on_class)) {

                 $(this).removeClass(on_class);
                 $(this).addClass(off_class);
                 $(this).html('Monthly');

              } else {

                 $(this).removeClass(off_class);
                 $(this).addClass(on_class);
                 $(this).html('Yearly');                  

              }
        });
    });
});

The Html:

        <div id="on_off" class="on_off_on" style="cursor:pointer" >Yearly</div>

Again, on the html, with each click of the div, the value toogles between Monthly and Yearly.

Now, my question: how can I post during my form submission the value of the selection (Monthly -defined in js as: var on_class = 'on_off_on'; and Yearly --defined in JS as: var off_class = 'on_off_off';) ?

Any thoughts on this appreciated!
Mossa

[pixelsoul]

Use a hidden input <input type="hidden" value="" /> in your form and then set the value of the input with jQuery.

[pixelsoul]

Use a hidden input <input type="hidden" value="" /> in your form and then set the value of the input with jQuery.

[pixelsoul]

strange.... not sure why that posted twice. Sorry about that.

[mbarandao]

Resolved! final solution:

$(document.body).ready(function () {
function showSelectionMthly()
    {
            $(function() {
            $( "#dialog" ).dialog();
            });

    }
    function showSelectionYrly()
    {
            $(function() {
            $( "#dialog2" ).dialog();
            });

    }

    $(function () {

      var main_obj_id = 'on_off';
      var on_none = '';// means Monthly
      var on_class = 'monthly';// means Monthly
      var off_class = 'yearly';  //means Yearly      

        $('#' + main_obj_id).click(function () {

        if ($(this).is('.' + on_class)) {
        $('#opt').val(on_none);// pass value to hidden textbox
        $(this).html('Select Subscription');
        }
              if ($(this).is('.' + on_class)) {
                 $('#opt').val(on_class);// pass value to hidden textbox
                 var vartxt = $(this).html("<b>Monthly</b>");
                  //alert("Have Selected " + vartxt + " subscription billed @");// pass value to hidden textbox
                showSelectionYrly();

                 $(this).removeClass(on_class);
                 $(this).addClass(off_class);
                 $(this).html('Monthly');

              } 

              else {
                 $('#opt').val(off_class);// pass value to hidden textbox
                 //alert("Have Selected " + off_class + " subscription billed @");// pass value to hidden textbox

                 showSelectionMthly();
                 $(this).removeClass(off_class);
                 $(this).addClass(on_class);
                 $(this).html('Yearly');                  

              }
        });

    });
});