<?= form_open("", 'id="pdkunit_form"', ['id' => $id]) ?>
    <?= xform_input('nama_unit', 'Nama Unit', $nama_unit, 3, 9, true, 150, 'ginputx') ?>
    <?= xform_input('nama_sunit', 'Shortname', $nama_sunit, 3, 9, true, 150, 'ginputx') ?>
    <hr>
    <div class="invalid-feedback text-center" id="em_message"></div>
    <div class="clearfix">
      <?= form_submit('btn_pdkunit', $button, 'waves-effect waves-themed float-right') ?>
    </div>
</form>

<script type="text/javascript">
$('.ginputx').inputmask({
     regex: "^[a-zA-Z0-9\\s.,@-]*$"
 });

 $('.angkax').numeric();
$("#pdkunit_form").submit(function(e){
  e.preventDefault();
  var url = '<?= $action ?>'
  var formData = $(this).serialize();
  $.ajax({
      url: url,
      type: "post",
      dataType: 'json',
      data: formData,
      beforeSend  : function() {
          $(".form-control").removeClass("is-invalid");
         $(".invalid-feedback").html('').hide();
         BtnLoading($("#btn_pdkunit"));
      },
      error: function (xhr, status, message) {
          var res = JSON.parse(xhr.responseText);
          $(res.messages).each(function(i,val){
            var inputname = Object.keys(val)[0];
            $.each(val,function(k,v){
                $("#"+inputname).focus();
               $("#"+k).addClass("is-invalid");
               $("#em_"+k).html(v).fadeIn();
            });
          });
          BtnReset($("#btn_pdkunit"));
      },
      success: function(res) {
          $('#nama_unit').val('');
          $('#nama_sunit').val('');
          $('#datagrid').datagrid('load');
          new_data();
         toastr.success(res.message, 'Updated!!', {timeOut: 3000});
      },
      complete: function() {
          BtnReset($("#btn_pdkunit"));
      }
  });
});
</script>