jquery function using selectors as variables

Question

So I have a particular function that needs to repeated again and again. So I thought I would make just one function that can be re-used.

function validate_form(field,validate) {
field.focus(function(){
    $(validate).css('margin-left','206px');
    $(validate).fadeIn();
    $(validate).animate({ 
            'marginLeft': '286px'
            }, 'fast');
    name        = $(field).val();
    alert(name);        
});
}

to call the function I would use something like

validation_form('#contact_name','#contact_name_validate');

So the idea here is to pass through the particular selectors required into the function, but I just cant seem to get it working. Is there some special way to pass through selectors when they are used as variables in a function?

nnnnnn · Accepted Answer · 2013-05-06 21:04:26Z

5

If the field parameter contains a selector you have to pass it to the jQuery() function:

$(field).focus(function(){

Note also that you can make your function more efficient by chaining the different methods that you want to use with $(validate):

function validate_form(field, validate) {
    $(field).focus(function () {
        $(validate).css('margin-left', '206px')
                   .fadeIn()
                   .animate({'marginLeft': '286px'}, 'fast');
        name = this.value;
        alert(name);
    });
}

At the point inside the focus handler where you had $(field).val() you can use $(this).val() or this.value rather than $(field).val() because this will already be the focused element so you don't need to select it again with $(field).

answered May 6, 2013 at 21:04

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Source Over a year ago

Oh right, I left out the $ for field, I was also calling the function by the wrong name: validate_form, not validation_form. Sloppy work!

David Thomas · Accepted Answer · 2013-05-06 21:04:50Z

1

field is a string containing a selector, not a jQuery object, you need:

$(field).focus(function(){
    /* other stuff in here */
});

Incidentally, this error should have shown up in the JavaScript console (it does for me, in Chromium at least):

TypeError: Object #contact_name has no method 'focus'

answered May 6, 2013 at 21:04

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Comments

Josh Mein · Accepted Answer · 2013-05-06 21:06:46Z

0

You can just pass the jQuery objects in instead as this will cache the jQuery objects so you are not retrieving them more than once:

var $field = $('#contact_name');
var $validate = $('#contact_name_validate');

validation_form($field, $validate);

function validate_form($field, $validate) {
    $field.focus(function(){
        $validate.css('margin-left','206px');
        $validate.fadeIn();
        $validate.animate({ 
            'marginLeft': '286px'
        }, 'fast');
        name = $field.val();

        alert(name);        
    });
}

answered May 6, 2013 at 21:06

Josh Mein

28.6k15 gold badges79 silver badges89 bronze badges

4 Comments

nnnnnn Over a year ago

The OP mentioned the function would be repeated "again and again", presumably with different selectors each time - are you suggesting creation of $field and $validate variables for each time?

Josh Mein Over a year ago

He could just pass the selector in itself instead of creating it in a variable. The main difference/benefit is caching the objects. validation_form($('#contact_name'), $('#contact_name_validate'));

nnnnnn Over a year ago

Or if you cache them inside the function then it would work regardless of whether you passed it selector strings or jQuery objects. But for this particular function there's no need to cache at all because you can just chain the methods used on $(validate) and use this.value instead of $(field).val() and then each item gets retrieved only once.

Josh Mein Over a year ago

Wherever he caches them it does not make a difference. I was more making the point that he should cache in general. In this situation it did not matter as much, but we do not know how his function may change in the future so it is good to teach best practice as well.

Collectives™ on Stack Overflow

jquery function using selectors as variables

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related