E-mail Address Availability Indicator - Jquery

[chibineku]

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'.

[justsomeguy]

Javascript halts on errors like that, you'll probably want to fix those errors before trying to debug this, they could be interfering.

[chibineku]

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.

[justsomeguy]

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.

[chibineku]

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.

[justsomeguy]

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

[chibineku]

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

[chibineku]

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!

[chibineku]

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.

[justsomeguy]

(($(this).val())!='')

That should work, print out the val to see what it is.

When I try to use it as a parameter to $.post and watch the headers, it is being sent as the literal word type.

Are you quoting it? It shouldn't be quoted.

[chibineku]

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

[justsomeguy]

I think this:{type:$(this).val()}should be this:{type:type}The left side is the property name, the right side is the variable with the value.

[chibineku]

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

[justsomeguy]

My mistake, I thought you were trying to send a variable called type with a certain value, not use type as the name.

[chibineku]

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.