Prevent Default Behaviour

4 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€92.30
List Price:  €129.22
You save:  €36.92
£79.14
List Price:  £110.81
You save:  £31.66
CA$135.92
List Price:  CA$190.30
You save:  CA$54.37
A$153.17
List Price:  A$214.44
You save:  A$61.27
S$134.71
List Price:  S$188.59
You save:  S$53.88
HK$782.26
List Price:  HK$1,095.19
You save:  HK$312.93
CHF 90.56
List Price:  CHF 126.79
You save:  CHF 36.22
NOK kr1,076.34
List Price:  NOK kr1,506.92
You save:  NOK kr430.58
DKK kr688.47
List Price:  DKK kr963.88
You save:  DKK kr275.41
NZ$166.49
List Price:  NZ$233.09
You save:  NZ$66.60
د.إ367.19
List Price:  د.إ514.08
You save:  د.إ146.89
৳11,000.23
List Price:  ৳15,400.77
You save:  ৳4,400.53
₹8,335.05
List Price:  ₹11,669.40
You save:  ₹3,334.35
RM473.25
List Price:  RM662.57
You save:  RM189.32
₦139,656.03
List Price:  ₦195,524.03
You save:  ₦55,868
₨27,872.43
List Price:  ₨39,022.53
You save:  ₨11,150.09
฿3,637.73
List Price:  ฿5,092.97
You save:  ฿1,455.24
₺3,222.80
List Price:  ₺4,512.05
You save:  ₺1,289.25
B$497.67
List Price:  B$696.75
You save:  B$199.08
R1,888.37
List Price:  R2,643.79
You save:  R755.42
Лв180.67
List Price:  Лв252.95
You save:  Лв72.27
₩134,942
List Price:  ₩188,924.20
You save:  ₩53,982.20
₪366.06
List Price:  ₪512.51
You save:  ₪146.44
₱5,625.18
List Price:  ₱7,875.48
You save:  ₱2,250.29
¥15,118.78
List Price:  ¥21,166.90
You save:  ¥6,048.12
MX$1,663.06
List Price:  MX$2,328.35
You save:  MX$665.29
QR365.44
List Price:  QR511.63
You save:  QR146.19
P1,373.02
List Price:  P1,922.28
You save:  P549.26
KSh13,148.68
List Price:  KSh18,408.68
You save:  KSh5,260
E£4,723.53
List Price:  E£6,613.14
You save:  E£1,889.60
ብር5,694.53
List Price:  ብር7,972.57
You save:  ብር2,278.04
Kz83,612.73
List Price:  Kz117,061.17
You save:  Kz33,448.44
CLP$98,024.19
List Price:  CLP$137,237.79
You save:  CLP$39,213.60
CN¥722.49
List Price:  CN¥1,011.52
You save:  CN¥289.02
RD$5,928.03
List Price:  RD$8,299.48
You save:  RD$2,371.45
DA13,469.95
List Price:  DA18,858.47
You save:  DA5,388.52
FJ$225.25
List Price:  FJ$315.36
You save:  FJ$90.11
Q781.84
List Price:  Q1,094.62
You save:  Q312.77
GY$20,987.69
List Price:  GY$29,383.60
You save:  GY$8,395.91
ISK kr13,817.61
List Price:  ISK kr19,345.21
You save:  ISK kr5,527.60
DH1,010.57
List Price:  DH1,414.84
You save:  DH404.26
L1,763.81
List Price:  L2,469.40
You save:  L705.59
ден5,677.01
List Price:  ден7,948.05
You save:  ден2,271.03
MOP$807.66
List Price:  MOP$1,130.76
You save:  MOP$323.09
N$1,895.98
List Price:  N$2,654.45
You save:  N$758.46
C$3,689.21
List Price:  C$5,165.04
You save:  C$1,475.83
रु13,357.88
List Price:  रु18,701.57
You save:  रु5,343.68
S/371.02
List Price:  S/519.45
You save:  S/148.42
K383.60
List Price:  K537.05
You save:  K153.45
SAR375.02
List Price:  SAR525.04
You save:  SAR150.02
ZK2,548.47
List Price:  ZK3,567.96
You save:  ZK1,019.49
L458.83
List Price:  L642.38
You save:  L183.55
Kč2,334.38
List Price:  Kč3,268.22
You save:  Kč933.84
Ft36,425.52
List Price:  Ft50,997.18
You save:  Ft14,571.66
SEK kr1,059.50
List Price:  SEK kr1,483.35
You save:  SEK kr423.84
ARS$85,666.43
List Price:  ARS$119,936.42
You save:  ARS$34,269.99
Bs695.09
List Price:  Bs973.16
You save:  Bs278.06
COP$389,673.99
List Price:  COP$545,559.18
You save:  COP$155,885.18
₡50,509.65
List Price:  ₡70,715.54
You save:  ₡20,205.88
L2,474.33
List Price:  L3,464.17
You save:  L989.83
₲736,638.54
List Price:  ₲1,031,323.43
You save:  ₲294,684.88
$U3,781
List Price:  $U5,293.55
You save:  $U1,512.55
zł398.17
List Price:  zł557.46
You save:  zł159.28
Already have an account? Log In

Transcript

Hello, in this jQuery video, I'm going to show you how to prevent the default behavior of an object. So let me simply create a form that I have to be applied to a form. This is the, you know, the simplest one to, you know, demonstrate this is actually create a form that you can imagine, you might see on our website. So this has a input type of text, for example. And then we have a placeholder in there, say, enter user name. So again, we're trying to just basically creating a login.

Password again, doesn't matter what items there are in there, because we haven't implemented the ultimate we're going to create the default pool. Now. We're going to create a input, but it's going to be of type Submit. And we are going to say, What am I going to say? Do I need to submit? Okay, so let's reload this, see what we get.

So we get this form. Lester's for format to nice again, this is all just a static doesn't change the functionality. Okay, so this, as you can see the page actually reload. Yeah, the question mark, because it's trying to go to the front page, what you could do is, you know, just put like an action, for example. And the action could be to go to a whole nother page. So in this case, I'm just going to keep it simple.

And just say, we're going to go to Google, just to you know, die, the website that works. If I were to try and go to another page on this, you know, server, there's nothing else there. So let's just do this. From that, click there. So after submission, it takes you to Google. Well, basically, another page does not have the best way to look at it, it could be page on a different website or a different server, or web page that's, you know, on your server as well.

But you, under some circumstance may want to prevent the default behavior of this submission. So what you can do, first of all, you need to select the element that you want to prevent the default behavior for. So in this case, I'm actually going to add an ID. Again, the Select tag, you can implement it however you want. Don't say cinnamon. Copy that.

I share the dot click function. We need the event object from here. And now to actually prevent the default behavior is really simple. You'd put a vent dot prevent, default, the spell depot correctly first. Now if I run it and I click Submit, it doesn't take me anywhere because this line how preventing the default behavior of that particular element. My thinking why would you ever want this if you've actually put an action in the form, for example, or you have specified some sort of specific functionality, the reason is, you might come across a condition that you want to prevent the default behavior.

For example, maybe this is a login form, and it takes you to another node, let's say, dot html, for example, the account page, but you only want this to you know, take you there if for example, you Put text in all of these. And then you could do checks in here for when the submission button is clicked, you could get the values using jQuery from, you know, the attributes, which are covered in a separate video. From these inputs, you could do some validation on it. And if it passes, the validation can even do back end validation using something like Ajax which I've got separate video for. And if you pass it that validation as well, then it takes it to the Kenda. html.

Otherwise, if the validation fails, for example, it will do event dot prevent default. So there you go. That's how you prevent the default be havior of any particular element at any location. Once you have picked it up using a selector in jQuery, that's it simple stuff. If you have any questions, feel free to drop me a message. And as usual, I look forward to seeing you in the next video.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.