CODEWITHSUNDEEP
javascriptphpjquerycodeigniter
Mirza Chilman
Mirza Chilman

Reputation: 429

codeigniter : form validation jquery

i have a form name nama kategori and then when someone input the nama kategorithat already exist, i want the button become unclickable like when the button being clicked it's not gonna do anything, the problem is i manage to get the error message when input the existing nama kategori, but when i click the button it's still send the data and inputting the data, for more info look the images below

Success Display Error Message enter image description here

Then i clicked button "Tambah"enter image description here

it's still adding the data into the tables, i want to prevent that, i want when the button clicked it's not gonna do anything below are my code

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>

CONTROLLER

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;
}

Upvotes: 2

Views: 115

Answers (1)

rajthakur
rajthakur

Reputation: 453

You need to make following changes to your jquery code:

$(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);
                }
            }
        });
    });
});

Upvotes: 2

Related Questions