Wednesday, 9 September 2015

Hidden feild validation using javascript and hide and show radio button based

<form name="form"  action="" method="post">
<input   type='radio'  value="rawmaterial" name='material'  class="dynamic_class">Transfer
    <input   type='radio'  value="salaryaccount" name='material'  class="dynamic_class">cheque
   
    <div id="tran">
<div class="form-group input-group">
 <span class="input-group-addon">transfer id</span>
    <input type="text" name="transfer_id" id="transfer_id" class="form-control"> </div> </div>
   
    <div id="transs">
   <div class="form-group input-group">
 <span class="input-group-addon">cheque number</span>
    <input type="text" name="cheque_no" id="cheque_no" class="form-control">  </div> </div>
     <button type='submit' name="submit" onclick="validate(event, this.form);" value="validate">submit</button>
    </form>
   
   
   <script>function validate(e, form) {
     
         var material = form.querySelectorAll('input[name="material"]:checked');
          var transfer_id=document.forms["form"]["transfer_id"].value
         var cheque_no=document.forms["form"]["cheque_no"].value
      
  if (!material.length ) {
        alert('please select fundsource or material source');
        e.preventDefault();
        return false;
    }
   
    if (form.material[0].checked != '' && !transfer_id.length ) {
        alert('please select transfer_id');
        e.preventDefault();
        return false;
    }
   
    if (form.material[1].checked != '' && !cheque_no.length)
   
      { alert('please select cheque no');
        e.preventDefault();
        return false;
    }
   

}</script>
<style> #tran{ display: none; }#transs{ display: none; }</style>
<script src="http://code.jquery.com/jquery.js"></script>
 <script>
 $(function(){
        $(".dynamic_class").click(function(){
          if($(this).val() === "rawmaterial")
            $("#tran").show("fast");

         if($(this).val() === "salaryaccount")
            $("#transs").show("fast");
             if($(this).val() === "rawmaterial")
             $("#transs").hide("fast");
              if($(this).val() === "salaryaccount")
             $("#tran").hide("fast");
           
           
        });
      });</script>

demo:
       
Transfer cheque
transfer id
cheque number

No comments:

Post a Comment