codeigniter：表單驗證jquery

Question

我有一個表單名稱nama kategori，然後當有人輸入nama kategori已經存在，我希望按鈕變得不可點擊，當按鈕被點擊它不會做任何事情，問題是我設法得到在error message當輸入現有nama kategori，但是當我按一下按鈕，它仍然發送數據和輸入數據，以獲得更多信息看下面

成功顯示錯誤消息

圖像

然後我點擊按鈕「Tambah」

它仍然將數據添加到表中，我要防止這種情況，我希望在按鈕按下它不打算做任何事情，下面是我的代碼

JQUERY

$(document).ready(function(){ 
    var check1=0; 
    $("#kategori").bind("keyup change", function(){ 
    var nama = $(this).val(); 
    $.ajax({ 
     url:'cekData/kategori/nama_kategori/'+nama, 
     data:{send:true}, 
     success:function(data){ 
      if(data==1){ 
       $("#report1").text(""); 
       check1=1; 
      }else{ 
       $("#report1").text("*choose another kategori"); 
       check1=0; 
       } 
      } 
     }); 
    }); 
}); 

VIEW

<div class="row"> 
    <div class="col s12 m8 l6 offset-m2 offset-l3" align="center"> 
     <form action="<?php echo site_url('kategori/insertKategori') ?>" method="post"> 
     <div class="input-field"> 
      <input id="kategori" name="kategori" type="text" maxlength="40" class="validate" required> 
      <label for="kategori">nama kategori</label>&nbsp;<span class="error" id="report1"></span> 
     </div> 
     <br/> 
      <button type="submit" class="waves-effect waves-light btn blue darken-1">Tambah</button> 
     </form> 
     <br/> 
    </div> 
</div> 

控制器

public function cekData($table, $field, $data){ 
    $match = $this->MKategori->read($table, array($field=>$data), null, null); 
    if($match->num_rows() > 0){ 
     $report = 2; 
    }else{ 
     $report = 1; 
    } 
    echo $report; 
} 

Answer 1

你需要做以下更改jQuery代碼：

$(document).ready(function(){ 
    var check1=0; 
    $("#kategori").bind("keyup change", function(){ 
    var nama = $(this).val(); 
    $.ajax({ 
     url:'cekData/kategori/nama_kategori/'+nama, 
     data:{send:true}, 
     success:function(data){ 
      if(data==1){ 
       $("#report1").text(""); 
       check1=1; 
       $('button[type="submit"]').prop('disabled',''); 
      }else{ 
       $("#report1").text("*choose another kategori"); 
       check1=0; 
       $('button[type="submit"]').prop('disabled',true); 
       } 
      } 
     }); 
    }); 
});