Search code examples
javascriptjqueryhtmljsp-tags

How to send values to hidden form field by clicking on radio button


In this form i have two radio buttons, if i select any radio button(Book Or Non-Book) that value should send for hidden form field i.e if i select book then hidden field value should be 1 and if i select non-book hidden field value should be 2. How can i do this by using jquery or dynamically using jsp either of this

1.Before i kept two form in separate div tags with hidden form field on each and i was toggling, like if i select book the form is submitting with the hidden value 1 but if i select non book it was sending null values.

  1. Actually in book form and non-book form all most all fields are same but only hidden value will differ (because in order to know whether user selected book or non-book) but now i thought to keep single form to submit with different hidden values (in above form so many fields are removed to make it simple,sorry if this code have wrong logic)
    This is my code

    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
    
    $(function() {
    
    $("[name=toggler]").click(function(){
            $('.toHide').hide();
            $("#blk-"+$(this).val()).show('slow');
            $('input[name=hiddenInput]').val(theValue);
      });
     });
    
    
     </script>
    </head>
    <body>
    
    
    
     <label><input id="rdb1" type="radio" name="toggler" value="1" />Book</label>
     <label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label>
    
    
    
    
     <div id="blk-1" class="toHide" style="display:none">
    
    <form action="Sample">
    
            <input type="hidden" value="" name="hiddenInput" />
    
             Enter Item Name:<input type="text" name="name">
                       <input type="submit" name="submit">
    
    </form>
    
    </div>
    

    Thanks in Advance...!


Solution

  • Hope this helps you:

    http://jsfiddle.net/9BrFs/

    $(document).ready(function(){
       $('#rdb1').click(function(){
          $('#hdn').val('1');
       });
    
       $('#rdb2').click(function(){
          $('#hdn').val('2');
       });
    
       // ONLY to test the hidden value
       $(':submit').click(function(){
         alert($('#hdn').val());
         return false;
       });
    });