how to create functions in jquery and reusing them

Question

I've got the following code

if(!$rta_cl_fn.length > 0){
    formSubmit = false;
    $('#div_cl_fn').addClass('has-error');
}else{
    $('#div_cl_fn').removeClass('has-error');
}

if(!$rta_cl_ln.length > 0){
    formSubmit = false;
    $('#div_cl_ln').addClass('has-error');
}else{
    $('#div_cl_ln').removeClass('has-error');
}

if(!$rta_cl_mn.length > 0){
    formSubmit = false;
    $('#div_cl_mn').addClass('has-error');
}else{
    $('#div_cl_mn').removeClass('has-error');
}

and there's loads more i just wanted to make a function so i just call the function rather than using if statements again and again

I've asked many a times but no one seems to understand what i want... i can show you what i'm looking in php format below

public function functionName($var1, $var2){

    $formSubmit = true;

    if(!$var1.length > 0){
        formSubmit = false;
        $var2.addClass('has-error');
    }else{
        $var2.removeClass('has-error');
    }

    return formSubmit;
}

if you need more clarity please ask

html is below

<div class="row">
    <div class="col-md-3">
        <div class="form-group">
            <label class="control-label">First Name <span class="required" aria-required="true" > * </span></label>
            <input type="text" name="rta_cl_fn" id="rta_cl_fn" class="form-control input-sm">
        </div>
    </div>
    <div class="col-md-5">
        <div class="form-group" id="div_cl_fn">
            <label class="control-label">Middle Name <span class="required" aria-required="true" > * </span></label>
            <input type="text" name="rta_cl_mn" id="rta_cl_mn" class="form-control input-sm">
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group" id="div_cl_ln">
            <label class="control-label">Last Name<span class="required" aria-required="true" > *</span></label>
            <input type="text" name="rta_cl_ln" id="rta_cl_ln" class="form-control input-sm">
            <span class="help-block"></span>
        </div>
    </div>
</div>

again my question is how to declare/create functions in jQuery and using them in the code.

Regards

just like as we do in javascript. define it anywahere and call it whenever needed. — Vaisakh Parannattil Cherul
– Vaisakh Parannattil Cherul, Commented Jun 20, 2014 at 10:33
did i say i know how to use javascript i dont know those two things.. miss vasisakh pc — Amjad
– Amjad, Commented Jun 20, 2014 at 10:35
what is $rta_cl_fn this variable for, can you please share that code also and share relevant html code. — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Jun 20, 2014 at 10:37

Karthik Chintala · Accepted Answer · 2014-06-20 11:07:07Z

2

Here is how you can create reusable functions using jQuery

(function($) {
    $.fn.functionName = function (var1, var2) {
            var formSubmit = true;

        if(!var1.length > 0){
            formSubmit = false;
            var2.addClass('has-error');
        }else{
            var2.removeClass('has-error');
        }

        return formSubmit;
        }
    };
  }(jQuery));

USAGE:

console.log($(".form-group").functionName('param1', 'param2'));

OR

a pretty much simpler way is by using a var to declare your function.

var myReusableFunction = function(var1, var2){
        var formSubmit = true;

        if(!var1.length > 0){
            formSubmit = false;
            var2.addClass('has-error');
        }else{
            var2.removeClass('has-error');
        }

        return formSubmit;
};

USAGE:

You can call this function similar to normal javascript functions

console.log(myReusableFunction('param1', 'param2'));

Check this tutorial

Hope this helps.

edited Jun 20, 2014 at 11:07

answered Jun 20, 2014 at 10:58

Karthik Chintala

5,5455 gold badges33 silver badges61 bronze badges

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

2 Comments

Amjad Over a year ago

i'm getting the following error (Uncaught TypeError: undefined is not a function parties.js:7 isValidtf parties.js:7 (anonymous function) parties.js:28 m.event.dispatch jquery.min.js:3 r.handle)

user1932079 Over a year ago

@karthik You may want to see the last comment I posted under my answer.

user1932079 · Accepted Answer · 2014-06-20 10:41:02Z

1

Your PHP mockup, isn't really PHP code, but I think I get the point. You're having problems converting it to JS.

function isValid(test_obj, element){
  if(test_obj.length == 0){
    element.addClass('has-error');
    return false;
  } else {
    element.removeClass('has-error');
    return true;
  }
}

Then calling the function would look like this:

var form_submit = isValid($('#rta_cl_fn'), $('#div_cl_fn'));
if (form_submit) {
  form_submit = isValid($('#rta_cl_ln'), $('#div_cl_ln'));
  if (form_submit) {
    form_submit = isValid($('#rta_cl_mn'), $('#div_cl_mn'));
  }
}

if (form_submit) {
  //Submit form
} //else, an error along the way

answered Jun 20, 2014 at 10:41

user1932079

5 Comments

Amjad Over a year ago

thank you @Jeremy Millar This is what i want to know... Thanks once again

user1932079 Over a year ago

No problem. If this is answer which best helps, be sure to accept by checking the checkmark. If another answer comes along which is more helpful, then be sure to check that one. :)

Amjad Over a year ago

when i use that code i get that error on consol (Uncaught TypeError: undefined is not a function parties.js:48 isValid parties.js:48 (anonymous function) parties.js:18 m.event.dispatch jquery.min.js:3 r.handle)

user1932079 Over a year ago

I would have to see the code. fiddle? When I execute it, no errors are thrown. Also, I am not using any anonymous functions.

user1932079 Over a year ago

No problem. I think you are a bit confused on accepting answers. You can only accept one. It is generally more considerate that if you have already accepted one, you do not unaccept to accept another without substantial reason. Feel free to restore this to karthik as that was the first-accepted answer. I'm glad we were both able to help.

Dimitri Zetzsche · Accepted Answer · 2014-06-20 10:43:16Z

1

Declare the function as follows in JS:

function functionName(var1, var2){

    var formSubmit = true;

    if(!var1.length > 0){
        formSubmit = false;
        var2.addClass('has-error');
    }else{
        var2.removeClass('has-error');
    }

    return formSubmit;
}

Use it anywhere in you JS:

functionName($('#rta_cl_fn'), $('#div_cl_fn'));

answered Jun 20, 2014 at 10:43

Dimitri Zetzsche

1875 bronze badges

2 Comments

Amjad Over a year ago

Thanks for you answer please note I dont know nothing about javascript i've learned some jquery.. therefore how would i use this in jquery scenario regards

Dimitri Zetzsche Over a year ago

Consider following working example on JSFiddle http://jsfiddle.net/sSeNN/1. It clarifies the idea with the functions I've made. Hopefully this is a working solution for you?

tarmaq · Accepted Answer · 2014-06-20 10:43:50Z

1

public function functionName (items, elem)
{
    var formSubmit = !items.length;
    elem.toggleClass('has-error', !formSubmit);
    return formSubmit;
}

answered Jun 20, 2014 at 10:43

tarmaq

4222 silver badges7 bronze badges

Comments

budamivardi · Accepted Answer · 2014-06-20 10:48:25Z

1

$(document).ready(function({
    var myVariable = functionName(1,$("#myElement"));
    alert(myVariable)
});


function functionName(var1, var2){
    if(!var1.length > 0){
        var2.addClass('has-error');
        return false;
    }else{
        var2.removeClass('has-error');
        return true;
    }
}


You can use it

answered Jun 20, 2014 at 10:48

budamivardi

7605 silver badges10 bronze badges

Comments

gitcdn · Accepted Answer · 2014-06-20 10:46:15Z

0

Your function looks like this in Javascript/jQuery, assuming the parameters are jQuery objects:

function functionName(var1, var2){
    if(!var1.length > 0){
        var2.addClass('has-error');
        return false;
    }else{
        var2.removeClass('has-error');
        return true;
    }
}

I removed the return variable because it isn't necessary within the function – you'd have to take a look at the return values of the function calls to test if any error occurred.

edited Jun 20, 2014 at 10:46

answered Jun 20, 2014 at 10:40

gitcdn

4853 silver badges9 bronze badges

Collectives™ on Stack Overflow

how to create functions in jquery and reusing them

6 Answers 6

2 Comments

5 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

5 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related