Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    338
    Thanks
    22
    Thanked 1 Time in 1 Post

    Posting Javacript Variable during Form Submission

    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:


    PHP 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:

    PHP Code:
     <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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 546 Times in 545 Posts
    You have 16 lines of JQ and 1 HTML and a problem.
    Why not just use radio buttons to do the, NOT a checkbox effect, but a radio selection effect in 3 lines of code and have no problem sending the info in a form submission?
    Code:
    <p>For how long?<br>
    <input type="radio" name="freq" value="monthly" />Monthly<br>
    <input type="radio" name="freq" value="yearly" />Yearly</p>
    Evolution - The non-random survival of random variants.

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    338
    Thanks
    22
    Thanked 1 Time in 1 Post
    Sunfighter,

    Thanks for the reply and the suggestion! The suggestion is indeed simple and short. Traditionally, is the approach I would take --and perhaps, I will. But I wanted to attempt the concept of the div.

    If anyone could shed some thoughts on the question that would be great!

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Give the div a name(so it passes in the form) and a value(same reason). Then change the value when you change the html; $(this).html('Yearly');
    Evolution - The non-random survival of random variants.

  • #5
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    338
    Thanks
    22
    Thanked 1 Time in 1 Post
    Resolved! final solution:

    PHP Code:
      $(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');                  
                      
                      }
                });
                
            });
        }); 

  • #6
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,133
    Thanks
    12
    Thanked 332 Times in 328 Posts
    Quote Originally Posted by sunfighter View Post
    Give the div a name(so it passes in the form) and a value(same reason).
    even if you (invalidly) give a <div> a name, it won’t be submitted. it’s not a form control element, after all.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Thanks Dormilich, I knew that, guess it was too late for me. My bad. Glad you solved it mbarandao.
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •