jQuery - Appending Values

I am trying to append a value in jQuery, and whilst this is a simple task with .append() it won’t work like I wan’t it too.
Background:
I have a sign up page, with ‘Name’ as a field. Depending on the value of this (empty or having valid characters in it) either a helpful hint, or a congratulatory message will be displayed. This is handeld in an function, triggered on the .blur() of the input field. What I want to do however, is place the value of this input into the congratulatory text. Of course, running this from the .blur() function, doesn’t work, as each time the input is blurred, the value get’s added on an extra time.

How can I get jQuery to add the value only once?

I tried writting a couple of if / else statements, but I couldn’t get it to work as I expected (it either didn’t add them full stop, or continued the above behavior!).

Thanks for any help / guidance you may be able to give me,

Adam

Add a boolean variable somewhere

var added = false;
if ( $(‘#field’).val() == ‘something’ ) && !added ) {
$(‘form’).append(‘<input name=“newInput” />’);
added = true;
}

Why not just use jQuery’s

(http://docs.jquery.com/Attributes/html#val)() method instead of append()?

For some reason, the code above didn’t work for me. I removed the first part of the if, as that made it do nothing, and with the added part around, it carried on adding, even when added should have been true!
Also, forgive me if I’m wrong, but, if something in the input field changes, and added = true, then, the message is not going to change to reflect this?
To show you what I’m on about, here’s the HTML:


<div class="formsection">
      <label for="name">Name <small>What do you like to be called?</small></label>
      <input type="text" name="name" size="25" id="name" /> 																																					   
<span id="name_success" class="success hide"><img src="/images/accept.png" class="att" alt="Tick" /> Hi, </span>																												
<span id="name_alert" class="alert hide"><img src="/images/exclamation.png" class="att" alt="Exclamation" /> Come on, you gotta have a name!</span>
</div>

And the jQuery JavaScript:


$('input#name').blur(function(){
	if($('input#name').val().length > 0){
  		$('span#name_success').show();
  		$('span#name_alert').hide();
  		var added = false;
  		if(!added){
  			$('span#name_success').append($('input#name').val());
  			added = true;
  		}
		system_check['name'] = true;
	} else{
		$('span#name_success').hide();
		$('span#name_alert').show();
		system_check['name'] = false;
	}
	check_system();
});

Would the html() function be more suited to this? I took a look at it, but, append seemed the better choice. If you feel I’m wrong though, I would appreciate a why!

the declaration of var added should be outside the scope of this whole block, place it above - so before the blur event handler is invoked, it’s false because it isn’t being added. when the event handler is invoked and if the length is more than 0, and if it isnt already added then it should append.

Thank you very much. It works in the fact that it now only appends once.
Two questions:

  1. Why do we have to put the var added above the whole block of code?
  2. How could I change the appended value after the input has changed? Is there an ‘idea’ behind a way this could be possible? I thought of capturing what the input was in a variable, then checking it against the current value, but then thought about how to keep the captured input as it was.

Because the function may be executed multiple times, as the ‘blur’ event can happen numerous times, and for each time the function body is executed in a new execution context, and so if the blur event fired 2-3 times, it would declare the variable called ‘added’ and assign false every single time, but since we placed it outside of this scope it can maintain the state information, or remember that it was set to true.

You can use the variable again, to change the value like so:

  		if(!added){
  			$('span#name_success').append($('input#name').val());
  			added = true;
  		} [B]else { $('input#name').val('new val'); } [/B]

Thank you for your explanation. I’ll have a play around with the else part, and see what I can knock up. Again, thanks for the help, and I’m sure I’ll be back at some point with more questions!
On another note, jQuery’s AJAX controls were blummin easy!

Right. This is may be harder than I though! What I need to do, if the input value has changed, is first of all, work out if the input value has changed. If it has, then I need to remove the old appended value, and replace it with the new one. Is there an easier jQuery function, that would allow me to simply write out my own value, each and every time the blur function was called, but, again, facilitating a change in the input value?
Would, the HTML value be more appropriate (i.e, start with nothing, and build on it?).

Not really sure there’s a more specific function, but you can use the .change function on certain form elements such as input, and remember to use variables outside the .blur and .change function to maintain state information.

OK. will take a look into that, and am also digging through Twitters JavaScript as they have something amazing similar to what I am looking for.