I have the following code that I'm using to cycle through each element in a form field, and clear whatever text is in it. If the user clicks out of the field without typing anything then the script is supposed to return to whatever value it started with (e.g. "Enter your name..."). If the user does type something, then it stays in the field even when they click out of it:

// clear the text in the form fields

$(document).ready(function() {
    $('#frm-quick input').focus(function() {
        var fieldFocus = 0;
        var fieldVal = $(this).val();
            if (fieldFocus == 0) {
                $(this).val('');
            }
            $(this).keydown(function() {
                fieldFocus = 1;
            })
        })
        $(this).blur(function() {
            if (fieldFocus == 0) {
                $(this).val(fieldVal);
            }
    })
})

I can see that fieldVal and fieldFocus will be overwritten each time the loop does a cycle. Meaning their values will be meaningless.

What I want to do is use an array. I know how to do this in traditional JavaScript no problem (e.g. something like fieldVal[i] = ...), but how would I do it in jQuery?? As the loop seems to be 'automatic'.

jQuery has the "each" method which can be used to loop over any DOM element:

$('form *').each(function() {
    alert(this.nodeName);
});

The value of "this" inside the anonymous function passed to jQuery.each is the DOM node we're looping over.

Ahhhh, thanks!
How would I add values to an array in the each method?

like the equivalent of using 'someVariable[i] = $(this).val' if that makes sense?

The most elegant way would be to use the Array push() method. This is native to JavaScript and has nothing to do with jQuery: array.push() adds a value to the end of the array.

var someVariable = [];
$('form *').each(function() {
    someVariable.push($(this).val());
});

Note that jQuery's val() method is expressed $(this).val(), not $(this).val; It is a function, or method, that returns the value attribute, not a property.

Ok thanks I'll give it a try!

Another problem! I keep getting errors saying that 'fieldVal' is undefined. I assume it's because it's outside of the function, but I thought declaring a variable with the 'var' statement made it global?

Here is my code so far:

$(document).ready(function() {
    var fieldVal;
    $('#frm-quick *').each(function() {
        var fieldFocus = 0;
        fieldVal.push = $(this).val();
            if (fieldFocus == 0) {
                $(this).val('');
            }
            $(this).keydown(function() {
                fieldFocus = 1;
            })
        })
        $(this).blur(function() {
            if (fieldFocus == 0) {
                $(this).val(fieldVal);
            }
    })
})

'Tother way round.

A variable declared and intialised inside a function WITHOUT var it will be global in scope.
With var it will be local

Actually, the problem is just that this:

var fieldVal;

should be this:

var fieldVal = [];

And this:

fieldVal.push = $(this).val();

should be this:

fieldVal.push($(this).val());

.push is a method, so it shouldn't take an assignment (.push = something). It is a function and is passed an argument. However it is only a method of an Array object, so fieldVal needs to be initialized in the enclosing scope either as [] or new Array()

Thanks to both of you for clearing those things up. But now I have another problem!

Now that I'm using the 'push' method, I don't know how to refer to a specific part of the array.

e.g. the last instruction:

$(this).val(fieldVal);

Sets $(this) to the last value in the array. Is there a way of setting it to the appropriate value like in a traditional for loop (e.g. = fieldVal[i])

$(document).ready(function() {
    $('#frm-quick *').each(function() {
        fieldVal = [];
        fieldFocus = 0;
        fieldVal.push($(this).val());
        $(this).focus(function() {
            if (fieldFocus == 0) {
                $(this).val('');
            }
        })
        $(this).keydown(function() {
            fieldFocus = 1;
        })
        $(this).blur(function() {
            if (fieldFocus == 0) {
                $(this).val(fieldVal);
            }
        })
    })
})

Just increment your own number inside the each function.

Ahhh of course! That takes me back to my roots, when I was using while loops instead of for loops

Still seems to be a problem though! The line which reads:

$(this).val(fieldVal[count]);

If I explicitly set which instance of the array to use (Im probably not using the right terminoligy here) then it works. e.g. fieldVal[1] rather than using the 'count' variable then it works fine.

But if I used fieldVal[count] then it comes up as being undefined!

$(document).ready(function() {
    count = 0;
    fieldVal = [];
    fieldFocus = 0;
    $('#frm-quick input[type="text"], #frm-quick textarea').each(function() {
        fieldVal[count] = ($(this).val());
        $(this).focus(function() {
            if (fieldFocus == 0) {
                $(this).val('');
            }
        })
        $(this).keydown(function() {
            fieldFocus = 1;
        })
        $(this).blur(function() {
            if (fieldFocus == 0) {
                $(this).val(fieldVal[count]);
            }
        })
        count++;
    })
})

Because by the time the event happens, count has been incremented to a point at which there is no value set in the array. When you reference count inside the blur event, it is using the non-local value of it, which has been incremented to the # of INPUT elements + 1.

Pass count to an anonymous closure so that it has its own local value when you bind the event:

(function(count){
    $(this).blur(function() {
        if (fieldFocus == 0) {
            $(this).val(fieldVal[count]);
        }
    })
})(count);
count++;

You might want to read this while you're at it:
How JavaScript Closures Work

Hmmm I've probably got this wrong, but is my code supposed to look like this?

$(document).ready(function() {
    count = 0;
    fieldVal = [];
    fieldFocus = 0;
    $('#frm-quick input[type="text"], #frm-quick textarea').each(function() {
        fieldVal[count] = ($(this).val());
        $(this).focus(function() {
            if (fieldFocus == 0) {
                $(this).val('');
            }
        })
        $(this).keydown(function() {
            fieldFocus = 1;
        })
        (function(count){
            $(this).blur(function() {
                if (fieldFocus == 0) {
                    $(this).val(fieldVal[count]);
                }
            })
        })(count);
        count++;
    })
})

As I am getting the error:

Error: $(this).keydown(function () {fieldFocus = 1;}) is not a function
Source File: file:///Users/pealo86/Documents/design/resource/code/script/frm-field-clear.js
Line: 19

No idea. Your syntax looks correct to me. If $(this).keydown isn't defined as a function, maybe your copy of jQuery is corrupted somehow.