Help Auto Check Textfield Available Or Not!

[whaku]

Hello, im new here.
i see few tutorial here and get stuck in this condition.
i make forum, standart forum using php & few javascript.

here's my register.php

PHP Code:

<script type="text/javascript">
function isEmpty(field) {
return trim(field.value).length == 0;
}

function trim(str) {
return str.replace(/^\s*([\S\s]*?)\s*$/, '$1');
}

function validateAForm() {
var form = document.form1;
var username = form.username;
var pass= form.pass;
var email = form.email;
var email2 = form.email2;
if(isEmpty(username)) {
alert("Field UserNama Tidak Boleh Kosong");
username.focus();
return false; //mencegah form disubmit
}
if(isEmpty(pass)) {
alert("Field Password Tidak Boleh Kosong.");
pass.focus();
return false; //mencegah form disubmit
}
if(isEmpty(email)) {
alert("Field E-mail Tidak Boleh Kosong");
email.focus();
return false; //mencegah form disubmit
}
if(email2 != email) {
alert("Field Confirm E-mail tidak sama dengan E-mail.");
email2.focus();
return false; //mencegah form disubmit
}
return true; //teruskan submit
}
</script>
<style type="text/css">
<!--
.style1 { color: #FFFFFF;
font-weight: bold;
}
-->
</style>
<form name="form1" method="post" action="proses_register.php" onsubmit="return validateAForm();">
<table width="83%" border="0" cellpadding="0" cellspacing="2">
<tr>
<td colspan="3"><span class="style1"><font color="#0066CC">REGISTER ID</font></span></td>
</tr>
<tr>
<td width="18%">&nbsp;</td>
<td width="1%">&nbsp;</td>
<td width="81%">&nbsp;</td>
</tr>
<tr>
<td>User Name </td>
<td>&nbsp;</td>
<td><input name="username" type="text" id="username" size="20" maxlength="20" />
<em>ID anda gunakan saat Login </em></td>
</tr>
<tr>
<td>Password</td>
<td>&nbsp;</td>
<td><input name="pass" type="password" id="pass" size="15" maxlength="15" /></td>
</tr>
<tr>
<td>E-mail</td>
<td>&nbsp;</td>
<td><input name="email" type="text" id="email" size="25" /></td>
</tr>
<tr>
<td>Confirm E-mail</td>
<td>&nbsp;</td>
<td><p>
<input name="email2" type="text" id="email2" size="25" />
<br />
</p></td>
</tr>
<tr>
<td>NIM</td>
<td>&nbsp;</td>
<td><input name="nim" type="text" id="nim" size="10" maxlength="10" /></td>
</tr>
<tr>
<td>Tahun Ajaran</td>
<td>&nbsp;</td>
<td><label for="tahunajaran"></label>
<select name="tahunajaran" id="tahunajaran">
<?php
for($a=2000; $a<=2013; $a+=1){
echo"<option value=$a> $a </option>";
}
?>
</select></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>&nbsp;</td>
<td>
<select name="tanggal" id="tanggal">
<?php
for($b=01; $b<=31; $b+=1){
echo"<option value=$b> $b </option>";
}
?>
</select>
<label for="bulan"></label>
<select name="bulan" id="bulan">
<?php
$bulan=array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");
$jlh_bln=count($bulan);
for($c=0; $c<$jlh_bln; $c+=1){
echo"<option value=$bulan[$c]> $bulan[$c] </option>";
}
?>
</select>
<label for="tahun"></label>
<select name="tahun" id="tahun">
<?php
for($d=2000; $d>=1980; $d-=1){
echo"<option value=$d> $d </option>";
}
?>
</select></td>
</tr>
<tr>
<td>Jenis</td>
<td>&nbsp;</td>
<td>
<input type="radio" name="gender" id="gender" value="L" checked="checked" />
Laki-Laki
<input type="radio" name="gender" id="gender" value="P" />
Perempun</td>
</tr>
<tr>
<td colspan="3"><p><font size="-1" color="#0066CC">REGISTER CONFIRMATION!<br>
</font><font size="-1">Untuk mencegah adanya auto register, mohon masukkan code yang terlihat dibawah!</font></p></td>
</tr>
<tr>
<td colspan="3"><p>
<img src="captcha.php" />
<br />
<input name="captcha" type="text" size="10" maxlength="6" />
<br />
</p>
<p>&nbsp;</p></td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Save" />
<input name="Batal" type="reset" id="Batal" value="Batal" /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form>

1. I need to make when i put username in that username textfield, automatic search in database its available or not. well its like register on other great forum.

2. i make that captcha, its work but its need progress in proses_register.php, in other words need to open other page to know it granted access to input data or not. i want make it prosess right away after im press submit, maybe like error message in my javascript in 1st row.

thanks before, sorry if my code is mess. im still new programer!

[AndrewGSW]

You could have a look at the following code to give you an idea of how you would do this. It uses ajax to call a php script as the user types a username, which either returns the text "Available!" or some error message. The error message is inserted into a paragraph just below the username-input.

// onchange event added to the username input 
onchange="check_username(this.value);"

// js code
var ajax = false;

if (window.XMLHttpRequest) {
    ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
        try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e2) {
            // Doh!
        }
    }
}

function check_username(username) {
    if (ajax) {
        ajax.open('get', 'includes/check_user.php?user=' + 
            encodeURIComponent(username));
        ajax.onreadystatechange = handle_change;
        ajax.send(null);
}

// Function that handles the response from the PHP script.
function handle_change() {
    // if everything's ok
    // status == 0 (local) 200 (live)
    if ((ajax.readyState == 4) && (ajax.status == 200)) {
        the_error = $('#username').next("p[class*='error']");
        // the_error is a (initially hidden) paragraph <p>
        if (ajax.responseText && ajax.responseText != '') {
            if (ajax.responseText == 'Available!')
                the_error.removeClass().addClass('error-ok');
            else
                the_error.removeClass().addClass('error-yes');
            the_error.text((ajax.responseText).substring(0, 30));
            // the response is "Some error message text"
        } else {
            the_error.removeClass().addClass('error-no');
        }
    }
}

PHP Code:

// the php: check_user.php
<?php
do if (isset($_GET['user']) && !empty($_GET['user'])) {
    require '../includes/config.inc.php';
    require '../andy3_connect.php';
    if (!$dbc) {
        echo 'Unable to check';
        break;
    }
    $user = mysqli_real_escape_string($dbc, trim($_GET['user']));
    $q = sprintf("SELECT user_id FROM users WHERE user_name='%s' LIMIT 1", $user);
    $r = mysqli_query($dbc, $q);

    if (mysqli_num_rows($r) == 1) {
        echo 'Not available!';
    } else {
        echo 'Available!';
    }
} else {
    echo 'User Name is essential!';        // username was empty
} while (false);

ob_end_flush();     // you may not need this
?>