Current File : //home/obabain/ms_obaba_in/Paymentvoucher.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ include file="Connection.jsp" %>
      <%
Statement st=con.createStatement();
ResultSet rs = null;
%>
<%!
String particular=null;
Double paid_amt=0.00;
double amt=0.00;
%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  rel="stylesheet">
 
    <link href="css/select2.min.css" rel="stylesheet">
    <link href="css/jquery.datetimepicker.css" rel="stylesheet">
     <style type="text/css">
  .template { display: none; }
  </style>
 
<title>Accounts</title>
</head>
<body>
<form action="paymentVouchDA.jsp">
<%@include file="master.jsp" %>
<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   
<div class="content">
 <div class="row" style="width:90%">
    <div class="col-md-9" >
       <div class="panel panel-default" >
       <div class="panel-heading main-color-bg">
        <h3 class="panel-title">Payment Voucher creation</h3>
    </div>
    <div class="pull-right" style="padding:5px 10px 0px 0px;">
     <!-- <a class="btn btn-danger" href="Paymentvoucher.jsp">Payment</a> -->
     <a class="btn btn-danger" href="Receiptvoucher.jsp">Receipt</a>
     <a class="btn btn-danger" href="Contravoucher.jsp">Contra</a>
     <a class="btn btn-danger" href="Journalvoucher.jsp">Journal</a>
    <!--  <a class="btn btn-danger" href="SalesVoucher.jsp">Sales</a>
     <a class="btn btn-danger" href="PurchaseVoucher.jsp">Purchase</a> -->
     </div><br><hr>
     <div style="padding:5px 10px 0px 0px;"><a href="PaymenyVoucherMultiple.jsp" class="pull-right btn btn-primary">Multiple Entry Mode</a></div>    <br><hr>
     <div class="panel-body" > 
     
    <div class="row" >    
       <div class="col-xs-4">
          <label for="lastname" style="margin-left:5px; color:red;">Payment No.</label> 
          <input type="text" name="payno" class="form-control">
          </div>  
          <div class="col-xs-2 pull-right">
          <label for="lastname" style="margin-left:5px;">Date</label> 
          <input type="text" name="paydate" class="form-control" id="datetimepicker"> 
          </div>     
       </div>
       <div class="row" >     
                <div class="col-xs-4">
          <label for="lastname" style="margin-left:5px;">Account</label> 
          <select name="account" class="select1 form-control"> 
          <option value="0">select</option>
          <%
          rs=st.executeQuery("select * from account_ledger where under=15 or  under=17");
          while(rs.next())
          {
          %>          
          <option value="<%=rs.getString("l_id") %>"><%=rs.getString("ledger_name") %></option>
          <%} %>
          </select>
           </div> 
          </div><br>
   <table class="table table-bordered table-hover additionalMargin alignment" id="table1">
  <thead>
    <tr >
       <th>Particulars</th><th>Bills (Bill No | Due amt. | Name)</th><th>Amount</th><th></th>
    </tr>
  </thead>
  <tbody>
    <tr class='template'>
    <td style="width:40%;">
     <select class="selectType form-control" name='particular[]' id="campInput" style="width:100%;" >
                <option value="0">select</option>
          <%
          rs=st.executeQuery("select * from account_ledger where under <> 26");
          while(rs.next())
          {
          %>          
          <option value="<%=rs.getString("l_id") %>"><%=rs.getString("ledger_name") %></option>
          <%} %>
                </select>
                </td>
                <td  style="width:40%;">
                <select name="invno[]" class="selectType form-control">
                  <%
                  rs=st.executeQuery("select tb.supplier_id,tb.pinvoice_id, tb.purchase_invoice_no,(tb.total-tb.paid_amt)as tot,(select supplier_name from ip_suppliers where supplier_id=tb.supplier_id)supp,'s' as type from ip_puchase_invoice tb where (total-paid_amt)>0 union all select tr.particulars, tr.journal_id, tr.journal_no,(tr.credit-tr.paid_amt) as tot,(select ledger_name from account_ledger where l_id=tr.particulars),'j' as type from  journalentry tr where type=2 and (credit-paid_amt)>0 ");
                  while(rs.next())
                  {
                  %>
               <option value="<%=rs.getString("pinvoice_id") %>"><%=rs.getString("purchase_invoice_no") %> | <%=rs.getString("tot") %> | <%=rs.getString("supp") %> </option>  
                 <%} %>       
                </select>
                </td>
     <!--  <td>
       <select class="selectType" name='typeInput[{{$ckey}}][campType]' id="campInput">
          <option value=""></option>
          <option value="Main">Main</option>
          <option value="Resend">Resend</option>
          <option value="Follow Up">Follow Up</option>
          <option value="Other">Other</option>
        </select> 
      </td> -->
      <td>
                <input type="hidden" name="Records.Index" value="0">
                <span><input type="text" name="amt[]" class="amt form-control">  </span>                                              
              </td>
              <td><a href='#'  onclick='deleteRow(this)'><i class='glyphicon glyphicon-trash'></a></td>
     <!--  <td>
        <input type="text" name='typeInput[{{$ckey}}][deliveryDate]' id="dateInput" placeholder='Completion Date' class="form-control dateControl"/>
      </td>
      <td>
        <textarea name='typeInput[{{$ckey}}][addInfo]' id="additionalInput"  placeholder='Additional Information' class="form-control noresize"></textarea>
      </td> -->
       
     </tr>
                              
                                            </table>
                                          <a id='add' class="pull-left btn btn-default">ADD</a><br> 
                                          
       <div class="row" >  
         <div class="col-md-4 pull-right">
<table class="table">
<tr>
<td align="left">Total<input type="text" name="total" class="total form-control"></td>
</tr>
</table></div>
</div><br>
          <div class="row" >   
          <div class="col-xs-4">
          <label for="lastname" style="margin-left:5px;">Narration</label>
          <textarea name="narr" class="form-control"></textarea>   
          </div>
            </div> 
            
            
<br>
     <div class="modal-footer" id="contact_submit">
         <input type="button" value="Back" style="background:#204b58;" class="pull-left btn btn-info" />
          <a class="btn btn-default"  href="">Reset</a>
     
        <input type="submit" value="Save Change" style="background:#204b58;" class="btn btn-info">
       
       
      </div> 
      
    
      </div>
      </div>
      </div>
      </div>
      </div>

</form>

</body>

<!-- <script>

$(document).on("change", ".amt", function() {

    /* var drp1Value = $('#Maintable tr').find('select').eq(0).val();
    $("option[value=" + drp1Value + "]", $('#Maintable tr').find('select').eq(0))
      .attr("selected", true).siblings()
      .removeAttr("selected");
       */

   /*  var drp2Value = $('#Maintable tr').find('select').eq(1).val();

    $("option[value=" + drp2Value + "]", $('#Maintable tr').find('select').eq(1))
      .attr("selected", true).siblings()
      .removeAttr("selected"); */

     var clonedRow = $('#Maintable tr:last').clone(); 
     $('#Maintable').append(clonedRow);
     
     $('#Maintable tr:last').find("input[type='text']").val("");
     
     var select = $(newref).find('select').clone();
     $(newref).find('.bootstrap-select').replaceWith($(select));
     
     /* $( ".amt:last" ).focus(); */
    });
    </script> -->
<script>
$(document).on("change", ".amt", function() {
    var sum = 0;
    $(".amt").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
    $( "#add" ).focus();
});
      
	        </script>
	       
<script  langauge="JavaScript">
function deleteRow(btn) {
	  var row = btn.parentNode.parentNode;
	  row.parentNode.removeChild(row);
	  var sum = 0;
	    $(".amt").each(function(){
	        sum += +$(this).val();
	    });
	    $(".total").val(sum);
	}
</script>
<script src="js/jquery.datetimepicker.full.js"></script>
<script>
     jQuery('#datetimepicker').datetimepicker({
    	 timepicker:false,
    	 todayBtn: "linked"
    	 //mask:true, // '9999/19/39 29:59' - digit is the maximum possible for a cell
    	});
     
     $(document).ready(function(){
    	 var d=new Date();
    	 var da=d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate();
    	 $('#datetimepicker').val(da);
    	 
     });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
   <script type="text/javascript">
  $(".selectType").on('change', function() {
 
      $(this).find('.selectbill option').each(function() {
        if (+$(this).val() == 40) {
          $(this).show();
          
        } else $(this).hide();
      });
  
});
  </script> 
<script>
$(function() {
    initThings();

    $('#add').on('click', function() { add_row($('#table1')); });
});


function add_row($table) {
    var tr_id = $table.find('tr').length - 1;
    var $template = $table.find('tr.template');
    var $tr = $template.clone().removeClass('template').prop('id', tr_id);

    $tr.find(':input').each(function() {
        if($(this).hasClass('hasDatepicker')) {
            $(this).removeClass('hasDatepicker').removeData('datepicker');
        }

        var input_id = $(this).prop('id');
        input_id = input_id + tr_id;
        $(this).prop('id', input_id);

        var new_name = $(this).prop('name');
        new_name = new_name.replace('[0]', '['+ tr_id +']');
        $(this).prop('name', new_name);

        $(this).prop('value', '');
    });
    $table.find('tbody').append($tr);

    $(".dateControl", $tr).datepicker({
        dateFormat: "dd-mm-yy"
    });

    $(".selectType", $tr).select2();
}
function initThings() {
    add_row($('#table1'));
} 
	        </script>
	        <script src="js/select2.min.js"></script>
    <script src="js/jquery.datetimepicker.full.js"></script>  
    <script>
    $('.select1').select2();
    </script>
</html>