add.pt 5.88 KB
<html metal:use-macro="load: ../base.pt">
<div metal:fill-slot="content">
<h4>${request.title}</h4>
<hr>
<form id="deform" 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']" style="display: none;">
        {structure:field.serialize()}
    </div>
    </div>
    
    <div class="col-md-6">
      <div class="form-group">
        <div class="col-md-6">
          <div class="form-group" tal:define="field form['tahun']" id="item-${field.oid}">
            <label for="${field.oid}" class="control-label col-md-4" id="req-${field.oid}">
                    ${field.title}</label>
            <div class="col-md-8">
               ${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="col-md-6">
          <div class="form-group" tal:define="field form['kode']" id="item-${field.oid}">
            <label for="${field.oid}" class="control-label col-md-4" id="req-${field.oid}">
                    ${field.title}</label>
            <div class="col-md-8">
               ${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="form-group" 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-10">
           ${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>
      $('#nama').bind('typeahead:selected', function(obj, datum, name) {      
            $('#kode').val(datum.kode);
      });
      </script>

      <div class="form-group">
        <div class="col-md-6">
          <div class="form-group" tal:define="field form['order_id']" id="item-${field.oid}">
            <label for="${field.oid}" class="control-label col-md-4" id="req-${field.oid}">
                    ${field.title}</label>
            <div class="col-md-8">
               ${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="col-md-6">
        <div class="col-md-6">
          <div class="form-group" tal:define="field form['status']" id="item-${field.oid}">
            <label for="${field.oid}" class="control-label col-md-4" id="req-${field.oid}">
                    ${field.title}</label>
            <div class="col-md-8">
               ${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="col-md-6">
          <div class="form-group" tal:define="field form['aktif']" id="item-${field.oid}">
            <label for="${field.oid}" class="control-label col-md-4" id="req-${field.oid}">
                    ${field.title}</label>
            <div class="col-md-8">
               ${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>
      <div class="col-md-12">
        <div class="panel panel-default" title="">
          <div class="panel-heading">Nilai</div>
          <div class="panel-body">
                ${form.start_mapping('amount')}
                  <!--div class="row collapse collapse error"if field.error:-->
                  <div class="form-group"  tal:repeat="field form['amount']">
                      <label class="control-label col-md-3">${field.title}</label>
                      <div class="col-md-8">
                        ${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>
                
                ${form.end_mapping('amount')}
          </div>
        </div>
      </div>
      <div class="col-md-12"></div>
        <div class="form-group col-md-offset-5">
            <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-default "
                  value="batal">Batal</button>
        
        </div>
    </div>

  </fieldset>
</form>
</div>
    <script>
      var nip_field='${field.oid}';
      var nm_field ='${field.oid}';
      var gj_field ='${field.oid}';
    </script>
          <script>
          $('#${field.oid}').bind('typeahead:selected', function(obj, datum, name) {      
                $('#'+nip_field).val(datum.nip);
                $('#'+nm_field).val(datum.nama);
                $('#'+id_field).val(datum.id);
                $('#'+gj_field).val(datum.gaji_bersih);
          });
            </script>

</html>