jQuery Form Events part1

Hello guys. Welcome to our jQuery series. In the previous segment we had covered the events related to the keyboard of jQuery.

 Let’s move forward with today’s segment. Today’s segment is related to jQuery form. Previously, we saw different devices and we covered all the methods related to the mouse. Previously, we also covered the events related to keyboard. Now, we are going to an HTML element called ‘FORM’. We will cover all the elements related to Form.

Basically, we get the idea from the name of our segment itself. All the things that we will cover today will be the things that are inside the ‘FORM TAG’. Meaning, this event is related to all the controls that are added inside the Form.

These events which are related to Form firstly, in these events we have input, text area, drop down. Along with that we have radio buttons, etc. So, we will see all the events which are related to this.

Basically, we will be seeing five elements today. Out of which one is ‘Blur’, ‘Focus’, ‘Submit’, ‘Change’, ‘Select’, etc. Let’s start with Blur. When we see Form events, do remember that all those events will be related to control only. Meaning, by changing control, by focusing control, by focusing-out the control, etc. Meaning, all the events of today will be control oriented only.

Let us first start with ‘Blur’. The meaning of blur is basically, when we talk in layman language it is called unfocused. But, when we come to technical terms, in web development. The blur here is like if we focus on something then opposite of that is blur. Meaning, let’s say I have a phone. If I see my phone constantly then where am I focusing? I am focusing on my phone. When I take my phone to some direction, or I have spectacles so I remove those spectacles and now if I see the phone then I will see my phone a little blur, meaning it would be seen unfocused. It means, if I am wearing spectacles, I am focusing on the phone. If I remove my spectacles then my phone looks blurry to me. Means, it looks blurry to me.

By taking these all terms our terminology is something like this, if we go to some control and want to start typing, then we can say that we are focusing on control. When we remove focus from control, meaning if we go somewhere else from that control. Means, we click outside the input field or we click elsewhere. Meaning we are not in control. Then what happens? We have been blurred from the controls.

Meaning, being in control, that is focus, not being in control, that is blur. Meaning, if I want to do something on the input field then I will try the focus event. Just like written here. And when I want to do something after removal of focus, means when the focus gets removed from my controls then that event would be ‘Blur event’.

Just like it is written here, “jQuery blur event occurs when an element loses focus”. Okay, so after removal of focus, the event which gets fired is our blur event. Whenever we want to execute a blur event, we can execute it in two types. In the keyboard there is a ‘Tab’ key and an ‘Enter’ key. If I press tab key then, there would be removal of focus from the current event. Second, if I press the enter button then it will probably be submitted, if it is a submit. Then also our focus of control will get removed. Third, If I click with the mouse here and there instead of control, then also my blur event would get fired. By any actions if I go somewhere else from the currently focused element then, my blur event would get executed.

So, the function of blur event is simple just like other similar syntax, this syntax is also- the same. After selector, name of the method that is blur and then function. As usually the function is optional here but we will write or else our action would not get performed. So, we will write the function.

Let’s see an example of blur. In the example what I am doing is, I am taking an input field. When it will be blurry from the input field then I will alert here. If we talk about real time examples, you have seen it many times, whatever we have entered in the input, if I want to get that entered value right away. From the input the focus gets released. So, for that we will use blur.

Many times, you must have seen, we have taken the ‘text’ field. If I add numbers in the text field instead of the characters, special characters. Then validation is performed which checks what else is added along with the characters in the input field. So, if there are numbers or special characters then it comes to me in red letters, only alphabets are allowed.

When does this get fired? Sometimes we attach blur events with that control which indicates it is blurry from control. Meaning, check the validation immediately once it is focused out. So, this is an example. We will cover blur with examples so that, we can see what is the use of blur

So, here I will open a sublime text….Setting HTML, ….Example blur. ….Here we will add our library of jQuery. And the script which we have to write would come here. And the thing we have to write in style will come here. We will center align the body…, text align…, center. So that, our content would be seen clearly.

Here, in ‘H one’ …tag, example…. blur. So, what should blur do? Basically, I want to blur when I lose focus from my inputs. So, here I will take one input. Let's take… type as text. We don’t require names. Enter…. name. Okay, so here I can also write span. There is nothing written inside the span. We can write in span ‘You ….entered’.

Okay, so what we have written is, we have generated a program in which I have taken an input field and taken span as well. Inside the input I have to enter a name. I want to make such a program that when my focus is lost from input, the inputs that I have entered here should be visible in span. meaning, whatever I have written should be seen down.

For that what I will do is, inside the script I will write dollar…, document,… dot…., ready, function….. Here, dollar…, I want to apply a blur event on input so that will be of this type. Input, dot, blur, what we have to do in blur, I have to perform some actions, so function will come here. Now whatever I enter, after losing focus it should be seen in span. Wherever I have written ‘you entered’, that should be seen.

We will write here dollar…, dot, span, ….dot, text. So, here input that we have…, dollar, input, dot…., val. Let’s see what output we get of this. I will save this program inside jQuery…. This program is related to blur. Now I run this program. So this is my program. Let’s say I apply a ‘BR’ tag….. Okay, so, now when I click on this input, you can see it is not focused. When I will focus on this then, I will go to the controls and click here. So, it is now focused.

After applying focus, I should see whatever I have entered here. Let’s say, enter your name, I have entered what my name is. I have not pressed the tab button and also not clicked anywhere. It is inside only. The time I pressed the tab button, it showed ‘you entered’ and my name. Meaning, whatever I have written has come here. When did it come though? When did the event get fired? It did when I lost focus from here.

I will do the same once again. Okay, reload, ‘A’, ‘B’, ‘C’, ‘D’. I will click somewhere out. So, you can see after clicking outside, meaning removing focus from here, whatever data comes, comes in ‘you entered’. Means, we understood what blur events do. When there is focus then nothing happens but when we focus out from our control then our blur event will be fired. Removing focus from input, whatever we want to do. Like in our example, the value which I had entered, I received it outside somewhere.

So like this, getting value and showing or whatever task you want to perform, when? When the focus is lost from the input. That you can do it with the help of blur.

Like this only, we have our next method, that is focus method. Focus’ task is exactly opposite of the blur’s task. What does focus do? Blur gets executed after focusing out. Now we have to execute after focusing. If I have some input control where I apply focus then, I have to perform some exchange. For that what will I do? My Focus method allows for this and performs actions.

Focus as written here, “jQuery focus events when an element gains focus”, when we focus on an element. “It is generated by mouse click or navigating to it”. Means, here, in our program when I type tab, my focus comes to input. I will reload this. Here, there is no focus now. I pressed the tab and my focus came.

Next, …when I click on this then also my focus comes. So, focus came by two ways, by pressing tab or by clicking. Now, how to do work in this focus? That we can do with the focus method. Many times, you must have seen, when we focus on the input field then the border design of the focused input field differs. Let’s say if I make a program where in when I focus on my input then its border should be highlighted. Like it should be in red color. So that I can understand which field I am focused on from a number of fields.

So, let’s say I copy this program and paste it here. Here, focus… Here also focused. We don’t require ‘entered value’ for now…. So, here also, we don’t require span. What is my work? When I focus on this input field then, the borders of the input field should be different. So, what will I do? When I have focused at that time only, dollars. I can either use a disc or I can write input again. But, after focusing on this input, I want to have the border of this input, have to apply CSS then for working from the same control, ‘this’ would be a better option. So, dollar, this, dot…, CSS…, border, …two pixels, ….solid, red. Let’s see if we receive output from this or not.

Save. This is our focus. I clicked on focus and my program is running. So, let’s say if I click inside this, you can see the border has now been changed to red.i Have taken two pixels, let’s do more, five. So, when I focus on this input field, you can see the border which is red in color. It is an indication on which input field I have focused on. On the file which we have focused on and have to show it in red color then using this way and using CSS, I can execute it. So, this is our focus. When I focus out, you can see the red color still. Because, we have only applied CSS on focus, we have not applied CSS on focus remove. How can we do that?

Here, if you want to remove the red border, we will execute the blur one here, like, dollar, input…, blur in place of focus, CSS, border, none… or to keep it the way it was let’s use none for example. Save, reload, I tapped this, removed this. Tapped, Removed. So, it is removed by none. So, the better option is…. we write one px, solid here. Let’s pass this color. Okay…

If you want to keep the color from the beginning so that the output of the program should be visible properly then, input, border…, one px, solid…, hashtag. Let's keep this from the beginning. ….Okay, we went. It got executed, left, it got removed. Tab, was focused, got blurred. Focus, blur.

So you can see when we want to do activity with focus and we have to remove the blur so that it should look proper. Proper consistency is important in designing. So now if we have done something with focus then it should get removed when blurry. So, this is an example of focus.

Next method is select. Select means, if we select onto something then, something should get executed. Meaning, here, I will type something. Done typing. When I select this, we have to perform some action that we can do with select. How can we do that? There are some lines here’ “jQuery select event occurs when a text is marked or selected in a text area or text field”.

Meaning no random changes. If I select the enter name, it won't get executed. When this will get executed, when we select text from inside the text field, it will get executed then. “This event is limited to input type, is equal to text fields and text area boxes. Means, it won’t work on password, it will not work on any other number. It will work on text type only. Syntax is the same as it was of everyone else. We have to write a select function. It is optional but we will write a function so that action should be performed.

Here, we have taken a program when we select on input then there should be some text stating something is selected. That’s it, we have to do this only. We have to show that something has been selected, we will execute this. Let’s say I go to sublime text. And this blur one I will copy and paste it, select, ….input portion.

Remove span, instead of blur it will come select…, select… Here, instead of this ‘you entered’ let's take one ‘DIV’. In the ‘DIV’ we write…., “content inside the input is selected”. Okay, as of now, the ‘DIV’ that I have, let's keep it hidden. Or else we can remove this from here and when I apply the show method then show. So, I will add it to the show. Means, here the input that we have, lets select on this input. I have made a mistake here, will tell you later about it. After selecting the input, I have to show this ‘DIV’. So, for that what I will write is, dollar…, DIV…, dot text…, inside it ….we will write this, control x and I will paste it here. Okay.

“Content inside the input is selected”, dot, show. Now I want it to be there for sometimes when called and then later should disappear. I have seen one method, fade. In this we will use fadeout. Show is done and then we are making it invisible after some time. Let’s say I take three thousand milliseconds. Meaning my data will be for three second and then it will be removed.

Let’s save this program. Its name would be selected. Now, run this program. This is my program. Let’s say, enter your name, here, I will write ‘A’, ‘B’, ‘C’, ‘D’. Now I will select this content. As you can see after selecting something came and then went. Escape, I will select it again. Now what is happening, whatever we have written in input, whenever I select it that message will show up. So, this is our example. Whenever I select here, my example is coming. If I want to keep it steady, then I will remove fadeout. What will happen because of that is, I will select the data but the data will remain like that only and will not disappear.

I want that whenever I select control at that time it should be seen. That is why disappearing it is important. That is why there is a fadeout effect applied. So, this is our select method which works after selecting the input. Now here, idly, if I want to select the very first, meaning to take the first input by number of inputs. I can take the colon selector here. So, this is the mistake that I made and said earlier.

‘A’, ‘B’, ‘C’, ‘D’ is selected but in the new jQuery methods meaning in new jQuery libraries, this selector part has been removed. Meaning if I write colon then it will get executed and if not written then, save, reload,…then also it will be executed. Means this selector part has been removed from there. So, with colon, without colon, in both these cases it gets executed.

So, this is our “select. In today's segment we will keep till select. Rest form related methods we will see in the next segment. We will continue this video and his segment in our next video. So, see you in the next segment.

Thank you.