Working with User-Defined Functions in JQuery

Hi all, how are you? Hope you will be fine. Today we are going to learn to work with user-defined function in JQuery. You all know about functions. Functions make our programming life easy. As you know JQuery is a javascript library so there is no difference in writing functions in JQuery. However, there are different ways to declare functions using JavaScript/jQuery. I’ll try to explain the benefits of each one and how and why you might use them when writing your awesome jQuery code.

JQuery Function

Below is the simplest way to declare a function in JavaScript as well as in JQeury. Say, for example, we want to write a simple function called multiply_me(a,b) which simply takes in two parameters a and b, multiply it and returns the value. Here are a few ways you might go about doing exactly this.

function multiply_me(x,y) {
     return (x * y);
}
//alert output: 4
alert(multiply(2,2));

The above function is very simple, no rocket science if you are familiar with javascript or any other language then you know that it is very simple to function. We just wrote a function with two parameters a & b and then returned its value by multiplying a to b. In the next line, we called the function using a system alert() method.

JQuery Functions for get/set

Here is another method of writing JQuery function. If you need a private utility for getting/setting/deleting model values then you can declare a function as a variable like this.

//The same function as before but with a self execution to set the value of the variable:
var multiply = function(x,y) {
        return (x * y);
        }(2,2);
alert(multiply);

This could be useful for assigning a variable upon declaration calculated by a function. We just wrote a jquery or javascript function and passed the parameter values. The problem with this method is that we can’t enter user-defined parameters. This method can be used where we only need static information. Now let’s try to write a function for the checkbox to get and set the value and then we’ll use it.

JQuery Checkbox Function

Assume you have some check boxes and you have to get their status and then want to set the value of that check boxes. Let’s first see the code then we’ll discuss on it. Code is here:

  function toggle_checbox_value(inputName){
    
        if($('#'+inputName).is(':checked')){
            $('#'+inputName).val(1);
        }else{
            $('#'+inputName).val(0);
        }
    }

// Usage
$('#enableuser').click(function(){
    toggle_value('enableuser');
  });

Code Explanation

First see the function. We have passed only one parameter to the function that is “inputName”. Actually “inputName” is the check box input name. Next we checked that input if it is checked then set its value to 1 otherwise to 0. Logic is very simple and usage is also simple.

In usage code you can see “enableuser”, it is input check box name. We used click event to trigger the function.

Conclusion

As you saw in this tutorial that writing JQuery is very simple just like other programming languages. First create a function with parameter or without parameters and then trigger it on click even, on page load or on any event like keypress, keyup etc.

Here are some more tutorials regarding JQuery/JavaScript. If you are interested in JQuery then you may visit these tutorials

If you need more help then you can contact us HERE.

Leave a Reply - I will show after approval