add.pt 8.19 KB
<html metal:use-macro="load: ../base.pt">
<div metal:fill-slot="content">
  <link href="/static/datatables/extensions/TableTools/css/dataTables.tableTools.min.css" rel="stylesheet">
  <link href="/static/datatables/media/css/dataTables.bootstrap.css" rel="stylesheet">

<div  class="panel panel-default">
  <div class="panel-heading">
      <h3 class="panel-title">Tambah SPTPD</h3>
  </div>
    <div class="panel-body">
    
     <form id="myform" method="post" enctype="multipart/form-data" accept-charset="utf-8" 
          class="form-horizontal">
      <fieldset class="deformFormFieldset">
        <input type="hidden" name="_charset_" />
        <input type="hidden" name="__formid__" value="deform"/>
        <div tal:condition="'id' in form">
          <div tal:define="field form['id']">
              ${structure:field.serialize()}
          </div>
        </div>
    
        <div class="form-group">
            <div tal:define="field form['unit_id']" style="display: none;">
                  ${structure:field.serialize()}
            </div>
            <div tal:define="field form['unit_kd']" id="item-${field.oid}">
                <label for="${field.oid}" class="control-label col-md-2" id="req-${field.oid}">
                        ${field.title}</label>
                <div class="col-md-2">
                   ${structure:field.serialize()}
                    <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                       tal:repeat="error field.error.messages()">
                       ${error}</p>
                </div>
            </div>
            <div tal:define="field form['unit_nm']" id="item-${field.oid}">
                <div class="col-md-6">
                   ${structure:field.serialize()}
                    <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                       tal:repeat="error field.error.messages()">
                       ${error}</p>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div tal:define="field form['subjek_pajak_id']" style="display: none;">
                  ${structure:field.serialize()}
            </div>
            <div tal:define="field form['subjek_pajak_nm']" id="item-${field.oid}">
                <label for="${field.oid}" class="control-label col-md-2" id="req-${field.oid}">
                        ${field.title}</label>
                <div class="col-md-5">
                   ${structure:field.serialize()}
                    <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                       tal:repeat="error field.error.messages()">
                       ${error}</p>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div tal:define="field form['nama']" id="item-${field.oid}">
                <label for="${field.oid}" class="control-label col-md-2" id="req-${field.oid}">
                        ${field.title}</label>
                <div class="col-md-5">
                   ${structure:field.serialize()}
                    <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                       tal:repeat="error field.error.messages()">
                       ${error}</p>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div tal:define="field form['periode_1']" id="item-${field.oid}">
              <label for="${field.oid}" class="control-label col-md-2" id="req-${field.oid}">
                      ${field.title}</label>
              <div class="col-md-2">
                 ${structure:field.serialize()}
                <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                   tal:repeat="error field.error.messages()">
                   ${error}</p>
              </div>
            </div>
            <div tal:define="field form['periode_2']" id="item-${field.oid}">
              <label for="${field.oid}" class="control-label col-md-1" id="req-${field.oid}">
                      s.d</label>
              <div class="col-md-2">
                 ${structure:field.serialize()}
                <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                   tal:repeat="error field.error.messages()">
                   ${error}</p>
              </div>
            </div>
        </div>
        <div class="form-group">
            <div tal:define="field form['tgl_sptpd']" id="item-${field.oid}">
              <label for="${field.oid}" class="control-label col-md-2" id="req-${field.oid}">
                      ${field.title}</label>
              <div class="col-md-2">
                 ${structure:field.serialize()}
                <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                   tal:repeat="error field.error.messages()">
                   ${error}</p>
              </div>
            </div>
            <div tal:define="field form['jumlah']" id="item-${field.oid}">
              <label for="${field.oid}" class="control-label col-md-1" id="req-${field.oid}">
                      ${field.title}</label>
              <div class="col-md-2">
                 ${structure:field.serialize()}
                <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                   tal:repeat="error field.error.messages()">
                   ${error}</p>
              </div>
            </div>
            <script>
                //$("#kode").attr('readonly',true);  
                //$("#das").attr('readonly',true);
                //$("#pok").attr('readonly',true);
                $("#jum").attr('readonly',true);
                $("#tar").attr('readonly',true);
                $("#unit_kd").attr('readonly',true);
            </script>
        </div>
        <div class="form-group">
            <div class="form-group col-md-2">
               </div>
            <div class="form-group col-md-6">
                <div tal:define="field form['uploads']" id="item-${field.oid}">
                <div class="col-md-12">
                   ${structure:field.serialize()}
                  <p id="error-${field.oid}" class="help-block" tal:condition="field.error"
                     tal:repeat="error field.error.messages()">
                     ${error}</p>
                </div>
              </div>
            </div>
        </div>
        <div class="col-md-6">
          <label class="control-label col-md-4"></label>
          <button id="deformsave" name="simpan" type="submit" class="btn btn-primary "
                value="simpan">Simpan</button>
          <button id="deformcancel" name="batal" type="submit" class="btn btn-danger "
                value="batal">Batal</button>
        </div><br><br>
      </fieldset>
     </form>
<script>
    $(document).ready( function(){
        $('#unit_nm').bind('typeahead:selected', function(obj, datum, name) {  
            $('#unit_id').val(datum.id);
            $('#unit_kd').val(datum.kode);
            $('#subjek_pajak_nm').typeahead('setQuery', '');
            $('#subjek_pajak_id').val('');
        });            

        $('#subjek_pajak_nm').typeahead({
                remote: {
                    url: "/sptpd/wajib/hon_sptpd/act?term=%QUERY&unit_id=",
                    replace: function () {
                        var q = "/sptpd/wajib/hon_sptpd/act?term="+$('#subjek_pajak_nm').val();
                        if ($('#unit_id').val()) {
                            q += "&unit_id="+encodeURIComponent($('#unit_id').val());
                        }
                        return q;
                    }
                },
                
                "hint"      : true,
                "cache"     : false,
                "highlight" : true,
                "minLength" : 1,
                "limit"     : 15
            },{
                "name"      : 'subjek_pajak_nm',
                "displayKey": 'value',
            });
            
        $('#subjek_pajak_nm').bind('typeahead:selected', function(obj, datum, name) {  
            $('#subjek_pajak_id').val(datum.id);
            //$('#wp_nama').val(datum.value);
            //$('#wp_alamat_1').val(datum.alamat_1);
        });        
    });
</script> 
    </div>
</div>
</div>
</html>