check username exists using ajax

Question

I use this code to check username exists in database before or not. code works good and shows available or taken username. now i want to submit button should be disable when user select username that was taken befor and enable when username available . please guide me how.

$(document).ready(function() {
    $('#username').keyup(function() {
        $.post('adm/chk_uname_avail.php', { 
            uname : changeuser.username.value 
        }, function(result){
            $('#available').html(result);
        })
    })
})

`S(btn).attr( disabled, disabled )` – u_mulder Jun 25 '16 at 13:11 — u_mulder, Jun 25 '16 at 13:11

Chay22 · Answer 1 · 2016-06-25T17:07:45.067

I'm using the old $.ajax function and make sure you have a data keyed taken (as example) with boolean type on adm/chk_uname_avail.php and notice that you should return JSON data type from it.

Example of adm/chk_uname_avail.php

<?php
//return response as JSON
header('Content-type:application/json;charset=utf-8');

....
....
....

$data['taken'] = true; //show this response to ajax
echo json_encode($data);

?>

Ajax

$(document).ready(function() {
   $('#username').on('keyup', function() {
        $.ajax({
            type: 'POST',
            url: 'adm/chk_uname_avail.php',
            data: {uname : changeuser.username.value},
            success: function(result) {
                var $btn = $('#submiButton');
                if (result.taken) {
                    $btn.prop('disabled', true);
                } else {
                    $btn.prop('disabled', false);
                }
                //As @Mikey notice, You can just use this as simply as
                //$('#submiButton').prop('disabled', result.taken);
            }        
        });
   });
});

You could just simplify your success handler by doing `$('#submitButton').prop('disabled', result.taken);` I think it's also important to mention that the OP must echo a JSON instead of HTML in their PHP. — Mikey, Jun 25 '16 at 14:04

score 0 · Answer 2 · answered Jun 25 '16 at 13:17

0

Use .attr() method of jQuery to make the submit disabled on certain condition.

So you can update your jQuery like this,

    $.post('adm/chk_uname_avail.php', { 
        uname : changeuser.username.value 
    }, function(result){
        $('#available').html(result);
        if(/* CHECK FOR CERTAIN CONDITION */) {
            $('#submit_btn').attr('disabled','disabled');
        }
    });

To remove the disabled attribute you can use removeAttr() method of jQuery. Like this,

$('#submit_btn').removeAttr('disabled');

http://api.jquery.com/attr/

https://api.jquery.com/removeAttr/

answered Jun 25 '16 at 13:17

Alok Patel

7,842
5
31
47

Dear Alok, my problem is how use condition in your code to achieve enable or disable submit button .`code if($('#available').html(result)) { $('#submitbtn').attr('disabled','true'); } else { $('#submitbtn').attr('disabled','false'); }` does not works. – unforgiven Jun 25 '16 at 15:25
above code disable submit button for both available username and taken usernate . so if username is available i can't submit button to save in database. – unforgiven Jun 25 '16 at 15:40

check username exists using ajax

2 Answers2

Linked