Jump to content

E-mail Address Availability Indicator - Jquery


chibineku
 Share

Recommended Posts

This thread is a continuation of another about ajax paramters. I fixed that problem but this is a new one regarding the same function.I am writing a jQuery script that inserts a sourceless image just before e-mail fields in my account_management page (and later registration page) and when you enter an e-mail address in the e-mail or confirm e-mail fields in a form and tab away/the field otherwise loses focus, an ajax call checks whether there are any users registered with that e-mail address and returns either 'taken' or 'free'. Anyway, that works fine but behaves unusually. If you start on the e-mail field and insert a taken e-mail address and tab to the confirm e-mail field nothing happens. If you leave the confirm email field blank or enter a valid e-mail address and you tab to the submit button, a cross appears next to the confirm e-mail field. If you tab back up past the e-mail field, both images turn to ticks, then tab back to the button and they both become crosses. It's madness! Here is a live example:enter either chibineku@aol.com or jonathon@sinaesthesia.co.uk to test with 'taken' addressesHere is the script which runs, in jquery terminology, $(document).ready():

 var res;  $('<img src="" alt="" style="width: 16px; height: 16px; margin-right:-16px;" />').insertAfter('#formS form fieldset > input[id*=mail]');  $('#formS form fieldset > input').blur(function() {  if($(this).is('#formS form fieldset > input[id*=mail]')) {	  $.post('checkemail.php5', {'email':$(this).val()}, function(data) {		res = data;		});		if(res == "free") {		 $(this).next().attr('src','/images/greentick.png').end().attr('alt','available');		} else if(res == "taken") {		 $(this).next().attr('src','/images/redcross.png').end().attr('alt','taken');		} else {		  console.log('erorr'+res);		}		}		});

Ignore errors regarding functions 'available' and 'match'.

Link to comment
Share on other sites

Okay I got rid of those function calls so you can see it in its raw state now. Those functions aren't called on the account management page anyway so I know that they aren't a factor in this problem.

Link to comment
Share on other sites

This is your ajax request with the callback function:

$.post('checkemail.php5', {'email':$(this).val()}, function(data) {  res = data;});

You need to add the rest of the code where it checks the response and updates the indicator into that callback function.

Link to comment
Share on other sites

That was my initial idea, but the difficulty, as you may recall from the other thread regarding this function, is that inside the ajax callback function, $(this) refers to the $.post object and the callback function will not accept additional parameters for me to pass some reference to the event target to it. So knowing which image to target is pretty tricky without having the onblur event fire from the form element directly. I could, I suppose, try to adapt the ajax callback function to accept this parameter and pass it to the callback function, but that's a little more work than I had anticipated.

Link to comment
Share on other sites

I'm actually getting dumber as the days go by, have you noticed?P.S. Mwah! :)

Edited by chibineku
Link to comment
Share on other sites

One final thing: is there anything wrong with this - else if(($(this).is('#formS form fieldset > input[id*=sername]')) && (($(this).val())!='')) I have tried so many combinations of the second condition it's not real, such as (!$(this).val == '')) and similar. It always passes the test, even for an empty field!

Link to comment
Share on other sites

And another little problem: I want to pass the same script either an e-mail address or a username, so I set the variable type like so: var type = ($(this).is('input[id*=sername]'))?'username':'email';This will replace the hardcoded 'email' in the function from the first post.I log type to the console and it shows the right value. When I try to use it as a parameter to $.post and watch the headers, it is being sent as the literal word type. Given that I am already passing $(this).val() as the value part of the string literal, I don't see why I can't use a variable as the name. I have tried inserting the ternary statement, in brackets and out, into the function parameter but nothing.

Link to comment
Share on other sites

Thanks for the unending willingness to help, jsg :)Edit: I fixed the $(this).val()!='' problem - I forgot about operator precedence. Adding parentheses about the two .is() conditions makes the || resolve first and then then the &&.I sent $(this).val() to the console and it reflects the correct value, whether empty or not. I am not quoting type in the function parameter. Here is the new complete function:

$(document).ready(function() {  $('#formS form fieldset > input').blur(function() {	if(($(this).is('#formS form fieldset > input[id*=mail]')) || 	($(this).is('#formS form fieldset > input[id*=sername]')) && 	($(this).val()!="")) {	  console.log($(this).val());	  var email_field = $(this);	  if(!$(this).prev().is('img')){	  $('<img src="" alt="" style="width: 16px; height: 16px;" />').insertBefore(this);	  }	  var type = ($(this).is('input[id*=sername]'))?'username':'email';	  $.post('checkemail.php5', {type:$(this).val()}, function(data) {				if(data == "free") {		 email_field.prev().attr('src','/images/greentick.png').attr('alt','available');		} else if(data == "taken") {		 email_field.prev().attr('src','/images/redcross.png').attr('alt','taken');		} else {		  console.log('hmmm'+data);		}		});		}		});});

Edited by chibineku
Link to comment
Share on other sites

No - the value is being sent correctly when I view the headers or console.log($(this).val). The problem is that, instead of evaluating the variable `type`, the literal word is being passed to the php script as the name.Edit: problem is fixed now. Someone on StackOverflow told me to create the literal outside of the function, like so:var params = {};params[type] = value;and pass params instead of {type:value}, which worked perfectly. Just FYI :)

Edited by chibineku
Link to comment
Share on other sites

Is no problem :) I kind of was, though - I wanted to send the variable type as the name part of a name:value pair. Every day another nugget of knowledge goes in, in its wake pushing out half a dozen others. My mind is like one of those machines they have in arcades where you feed in change which lands on a shelf and pushers nudge more change toward the edge. You always put in more than you get back.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...