jQuery Form Events part2

Hello, guys welcome to our series jquery.

In our previous segment, we started with jquery form events.

In today's segment, we will start with a continuation of the previous segment.

In this, we will see form related other two methods, which we will see today.

First method or of the remaining two methods one from that is the change method.

What is the work of a change event?

Basically, you might have seen many forms, HTML forms, inside the form we are having different values, I have already added some value.
When my current value will change.

Means for example let's take dropdown.

In the dropdown, there are always only multiple values.

If I take drop-down named fruits, like apple, banana, papaya, watermelon my values are like this.

So whenever I change any value, then I have to perform any action.

So for this what I will do? whenever my inputs fill, means my control value changes then whatever action I have to perform, how can I do it?

The first answer is with the help of change.

Then if I had my change method how does it work?

Input.

As you can see it's written here.

The event is limited to input, text area, and select.

Meaning input, text area, and drop-down, select means dropdown.

Whenever I change their value.

Then my change event will get fired.

Here, “it works only on form fills”.

Definitely, in today's complete segment all the examples are related only to forms.

So, change is also form-related.

You cannot work on due, it will not work on the change of p.

This only and only will work on form.

When the change event occurs, the changed method attaches a function means we will definitely work with function only.

In this syntax, we need to write change in this way, function though optional we need to write it anyway or else the action will not perform.

We are basically clear with change, then whenever we add something in the input field, not that,we change the value of edit our change executes.

We will see the example of what I am doing in the example, I have to take a drop down for example whatever value of that drop down, whenever I change the drop-down value then whatever my value, selected value, I want that to be shown below my drop down every time I change.

So currently we did this work by document dot get element id.

Let's say we will try this in two ways, we will also try this, or we will also try with jquery.

So for this, first of all, I will open a sublime text, and I will copy the previous program of select.

I have pasted it here.

In place of “select comes change.

Here change.

…

I will remove this portion.

We will keep input now, actually come select.

Now here is an example change.

Here comes select.

…

And here as you know there will be an option in select because this is a drop-down.

So let's say, I will add one here, select your… favourite fruit.

And inside select, I will add four options- apple…, banana…, mango…, and papaya.

Now, this became my drop down and here I will add br two times.

Here I will add a span “ you selected.

We can take div or we can also take span.

Clear.   we will save the change here first so that we can see what is this?

It's a chance we will give the name to it.

This is my program so you can select your favourite fruit.

Here is my drop-down. Now I will select anything, I will change its value, and now nothing is happening.

But I want it to show whatever value I am changing.

So what I do I, here is our select, I will apply change on this select.

So whenever I change the value then it should show me whatever the select” is.

So we will try once whether it will execute or not with one method and that way is our dollar span dot… text, what we took here so I am taking span here.

We need to show the select value in the text.

So …dollar… select dot… value we will execute it, reload I will change, you can see till now I have not changed that is why nothing can be seen here.

Mango, as soon as I selected mango, mango came here.

Now I will do papaya, here comes the papaya.

Now I will do the apple, here comes the apple.

Means whenever I am changing the drop-down value.

Whatever value I am selecting after changing that value is shown here below.

So this is our change, this was our first way, the second way is our traditional javascript way.

That we have learned in learnvern’s javascript course and the same has been shown here.

 Here we will select an id such as “document get element by id”.

Then from HTML whatever value we have taken that we will show here.

Means it is our select dropdown.

And here our location is the value that we have to show here is span.

But compared to these two lines it is easily getting completed in one line.

Initially, I have told you that jquery is not the replacement for javascript.

But it will provide us with a different way which helps to shortline the code and write it.  The same is happening here in less lines than I have covered in these two lines.

So this is one of our advantages of using jquery.

So as you can see here whatever value “select we have taken here.

Whenever I change the value of the dropdown that is shown over there in this program.

So this is our change method.

We can show the value whenever we change with the help of the change method.

This is also an important method.

Whenever we work with the form in the web page then whatever changes we made to the value in the form we need to dynamically pass them.

Means it is not like to change and click on any button and change and then click on any button.

If we do such development here that I change here and click button and when I click button the will be shown here.

So here a user’s click is increased.

In web development or web application development we need to minimise user's click.

We don't want the user to click click click and work.

So what happens when we add a change event we are reducing one click.

When you become a web developer then you need to keep all these things in mind a lot in how many fewer clicks you can execute your code, finish it and develop it.

So this is one of its examples.

We will move forward in our slide.

Our method which comes after change is the submit method.

In every form, if you have noticed then we will have a submit button.

What does the submit button basically do?

 When we write a submit input type equal to submit then our submit button call will happen along with that.

But let's say if I want to submit my form in the same way instead of the submit button then what can I do?

I can use the jquery submit method.

As written here “jquery submit event is sent to the element when the user attempts to submit a form”.

Means clicking the button the same method call will happen.

Plus other than button click, this is an interview question so listen carefully, in an interview, it might be asked as “you tell the different ways of submitting the form” then definitely if there is button in form then will say there is button form.

But what is the other method?

Another method is the jQuery submit method.

We can also submit the form with the help of the jQuery submit method.

Now here is also the interview question.

This event is only attached to the form element.

Means as we all already know the button, submit button comes in the form itself in the jQuery or HTML we haven't even seen submit button in any due and it won't even be there.

Enter so basically where will the submit button come?

It will come in the form.

Now it is written here “forms can be submitted either by clicking on the submit button or by pressing the enter button on the keyboard when certain form elements.

So its syntax is easy. It is like our usual syntax only they have written.

function, which is optional but we will write it.

What is “submit''?

I have taken such an example of submit in which we will give one input field.

We need to enter a value in the input field.

If my value is learnvern then it should be submitted.

If my value is not learnvern then my value should not be submitted and some error should be shown there.

Then when will I do it?

I will do this on the submit button click.

Means if we made a form and we want to attach the submit button with the validation

Then when can we do it?

By writing form dot submit.

Means on the submit button whatever events you want to add we can add them by writing form dot submit on all those events.

So this is one of our examples.

Now, this is a very important example because whenever we make a form using jQuery then we move forward like this only, and many tasks get attached to the form submission.

When you start the job in the industry through a web developer in any industry then you will definitely know how to develop a form.

Developing form means, you need to add validations in the form, you will make the form with plain HTML, javascript, jQuery, you will also make the form in angular or react.

But this knowledge is very important to you.

If you want to make through pure jQuery then you need to write a code that what all things I need to validate on the submit button, what all points are there in validation, how to do it, how not to reload the form, how to reload it, there are many points.

So this example will answer our three to four questions.

So we will move forward in this example.

Let's say I will copy and paste this code here.

Submit comes in place of change and here comes dollar form dot submit, the function written after submitting.

Important thing.

Here you can see the event is written in the function.

So I will pass the event in the function here.

What is the use of it?

When I click on the submit or I will perform any event in my web page, an event will be attached with every of it.

If we want to use it then only we will pass it in the function parameter.

If I don't not want to use the event then we will not pass this.

All our programs which we saw until now have not passed “event in any of them because we didn't have any requirement but now we will pass now because it is necessary to pass because I do not want to reload my form.

I am repeating that I do not want to reload my form.

For this there is a method, to use this method  I need to use an event.

So here comes the event.

For now I will keep only this much.

Here I will remove the drop down.

I will also remove all these lines.

This is our example “submit.

I will need a form to submit, so I will add a form here.

Inside the form, we know that there are two methods.

One method is a method that has create and post and the other is action in which we will indicate where to redirect.

Let’s say I do not want to redirect anywhere, I want to stay on the same page.

I just want to show whether the form is successfully submitted or not.

So what I will do is form action, in this I will write javascript.

Here if i don't want to do anything then we will pass void.

I wish if the form is successfully submitted then a message to come which says “form submitted successfully”.

So alert(6 seconds pause, typing), you can see here double inverted comma and double inverted comma here too, so it is throwing an error here for this reason I will make a single invert in alert and I will make invert here too.

This is the only proper way to write this.

If I want to use double quotes outside then wherever I want to use inside then I will use “single.

So what happens here is when the form is successfully submitted then this alert message will come.

What will we do in the form?

Let's say I will give an input field input, input type equals to text, name is not necessary for me.

I will take another input, input type equal to my submit.

Means this is my button,write input type equals to submit then value is click.

Enter the…. secret message.

…

That means we are going to enter a secret message here.

where?

Inside this input.

If this input secret message is correct then i want to show something outside the form, that is, here in span, that whatever secret message is entered whether it is correct or not.

If it is correct then my form will be successfully submitted if it is not then it will show the secret message is incorrect.

So what I will do here is input .

I have to check on the submit button whether the secret message is correct or not.

So what will I do here?

We have already written a form …dot… submit.

So here we will write if.

…

ok?

Inside the if whatever value we have taken in the input dot well.

This value is equal to… equal to…

…

 learnvern.

Means if this value is learnvern then my secret message is correct.

Means dollar span dot text.

…

Secret message is correct.

Ok?

This means dot show and for me means this  I have “show  in span secret message is correct.

Done and this form i have to submit too.

So to submit what will I write?

Return else means if the secret message is wrong then what will we write?

Dollar span dot text secret message is incorrect dot show.

I wish that after showing I want it to disappear.

So …dot fade out after three thousand millisecond.

Done after doing so much.

I hope that my form in any case doesn't get reloaded.

So to stop the reload we passed an event, so here comes the event.

Now this is our javascript method which is used to stop the reloading of pages and that method prevents default.

So what will prevent default do?

It will not allow our page to reload.

We will try to see if our program will successfully “submit'' or not.

So I will save this in the name of submit and I will run the program.

Now this is my program.

Now what I will do here is enter the secret message.

What was our secret message?

learnvern .

So after writing,..learnvern,     I will click here.

What came here in the alert form submitted successfully and the secret message is correct.

Wow!

Means my secret message was successfully submitted.

Now you can see my page is not reloading means my page has not been reloaded because we have given it a warning.

Let's see, I will pass this default portion to s.

Save reload.

Now I will pass the correct message …learnvern …click.

Form submitted successfully ok.

In every case my reload is not working because we have attached a default.

If I do one work here I will remove learnver here. My message has not disappeared yet.

So I will add this fadeout method here too .

Now I will add an incorrect message abcd.

Click.

It is showing form submitted successfully

Means there is some fault, what is the fault here?

Fault here is the input value which we gave learnvern still my form is successfully submitted which should not happen because we have written abcd here that is the incorrect message.

Means on top of incorrect this alert should not come.

So this only and only should come in case of “correct.

Two things did not work.

The first is that my form got incorrectly submitted and my message was also not shown.

So we will check in code.

Now for this we will go in code. Here you can see in code here in show I haven't added a dot, without dot fadeout..got added.

So as soon as I add a dot here my syntax will get corrected.

Ok?

What I have written now is the correct way.

So now I will save this and reload it .

Now I will add here the correct message learnvern.

Click.

Secret message is the correct form submitted successfully on doing ok it went.

Because what we wrote “fade..” out over there.

Now I will write an incorrect message and I will click so the secret message is incorrect.

Means until i wont write the correct message my form won't get submitted.

So I will again write learnvern form submitted successfully and the secret message is correct.

So this is our submit method for what we did?

Means submit related tasks.

Means submit form submit I have to make something to do .

That is something I have attached inside the form submit method.

We have stopped the reloading of form using the prevent default and whatever task I want I have added in syntax.

This is one example if you want something to check on form submit.

Otherway any validation real time example of this is whenever we make contact form

On the click of submit all the validations are done.

So now here after submitting the form.

Here is our ten number line here: how much ever input controls you have written you can write all the validation that you have performed here.

If you want to show errors then you can show errors in this way there.

And we will not submit the form until it is correct.

Write return to submit.

So this is our proper way to submit the form along with corrections.

So this was our submit method in jQuery.

With this our form related methods of jQuery are finished.

We have covered a total of five methods - blurr, focus, change, select and submit.

I hope, all our videos means whatever practicals you did, in the description box of all the videos for what you have done the practicals, the code file will be available.

You can take from there and practice the practicals.

Or if you want to perform your variation for practice then you can also do that.

If you have any issue or difficulty while practising or if you have difficulty in both, this segment and this segment or you faced any problem in understanding then you can share them in our forums.learnvern.com.

We will revert with solutions to all your questions and queries. Discussion to be added.

We will meet in our next segment where we will continue these events and will see the last events of jQueries that are documents and window related. .

So see you in the next segment guys.

Thank you.