ajax field availble

[ddellostritto]

Hi all -

I'm looking for a flexible way, via ajax to verify if a *field* is available. I found a script that works: http://web.enavu.com/tutorials/checking-username-availability-with-ajax-using-jquery/

The problem is that this is a little unwieldy: for every field (input) that you want to verify w/ajax you have to have a different php file and different jquery file (I am not very experienced in jquery, I'll admit).

I need something that will allow me to check if the data entered into a field I've chosen exists or not; it must be flexible enough to be used on different fields in one form.

Can anyone help? Thanks!

[ddellostritto]

Found / made a solution:

Based on: http://shawngo.com/wp/blog/gafyd/index.html

I'm just getting into jquery/ajax now, so this may be a little dirty (if you can help me make it better, please do!).

The Ajax

<script type="text/javascript">

$(document).ready(function() {
	$('.usernameLoading_one').hide();
	$('.usernameLoading_two').hide();
	
	
	// check 1
	$('#checkbutton_one').click(function(){
	
	  $('.usernameLoading_one').show();
	  
      $.post("check.php", {
        check: $('#check_one').val(),
        table: $('#table').val(),
        column: $('#column_one').val(),
      }, 
      	 function(response_one){
        $('#usernameResult_one').fadeOut();
        setTimeout("finishAjax_one('usernameResult_one', '"+escape(response_one)+"')", 400);
      });
    	return false;
    	
	});
	// end check

	// check 2
	$('#checkbutton_two').click(function(){
	
	  $('.usernameLoading_two').show();
	  
      $.post("check.php", {
        check: $('#check_two').val(),
        table: $('#table').val(),
        column: $('#column_two').val(),
      }, 
      	 function(response_two){
        $('#usernameResult_two').fadeOut();
        setTimeout("finishAjax_two('usernameResult_two', '"+escape(response_two)+"')", 400);
      });
    	return false;
    	
	});
	// end check
	
	
	
 // end 
});

function finishAjax_one(id, response_one) {
  $('.usernameLoading_one').hide();
  $('#'+id).html(unescape(response_one));
  $('#'+id).fadeIn();
} //finishAjax

function finishAjax_two(id, response_two) {
  $('.usernameLoading_two').hide();
  $('#'+id).html(unescape(response_two));
  $('#'+id).fadeIn();
} //finishAjax
</script>

The PHP

<?
//connect to database
mysql_connect('xxx', 'xxx', 'xxx');
mysql_select_db('xxx_tec');

$check = $_POST['check']; 
$table = $_POST['table']; 
$column = $_POST['column']; 


//mysql query to select field username if it's equal to the username that we check '
$result = mysql_query("select $column from $table where $column ='$check'");

//if number of rows fields is bigger them 0 that means it's NOT available '
if(mysql_num_rows($result)>0){
	//and we send 0 to the ajax request
	echo "unavailable";
}else{
	//else if it's not bigger then 0, then it's available '
	//and we send 1 to the ajax request
	echo "available";
}
?>

Dummy HTML (not clean, proper, just used to test)

<input type="hidden" name="table" id="table" value="xxxx"/>

<!--  -->
<input type="hidden" name="column" id="column_one" value="xxxx"/>
Username:
	<input type="text" id="check_one" name="check"/>
	<span class="usernameLoading_one"><img src="assets/imgs/loading.gif" alt="Ajax Indicator" /></span>
	<span id="usernameResult_one"></span>
<input type='button' id='checkbutton_one' value='Revisar disponabilidad'>
<!--  -->


<br /><br />
<!--  -->
<input type="hidden" name="column" id="column_two" value="xxxx"/>
Username:
	<input type="text" id="check_two" name="check"/>
	<span class="usernameLoading_two"><img src="assets/imgs/loading.gif" alt="Ajax Indicator" /></span>
	<span id="usernameResult_two"></span>
<input type='button' id='checkbutton_two' value='Revisar disponabilidad'>

<!--  -->

Comments:
This allows you to apply multiple checks on one page: there is only one php script that performs a mysql check depending on the hidden values (specifying which table and which column to check in). The weakness here is that there are important values, which aren't visible to the user on the screen, but if they were to check the source code they could see them. Also to note, the variables would have to be cleaned.

Because of my lack of experience in jquery I couldn't really simplify it any more, so for every different check that you want to apply you'd have to repeat create a new set (you'll notice that there is a _one or _two). This probably could be done with something similar to an array in jquery, but again, not sure how to do it.

Hope this helps someone else.