Working with Forms

Modern JavaScript Manipulating HTML Pages
6 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.78
List Price:  €129.90
You save:  €37.11
£79.40
List Price:  £111.16
You save:  £31.76
CA$136.11
List Price:  CA$190.56
You save:  CA$54.44
A$154.13
List Price:  A$215.78
You save:  A$61.65
S$135.08
List Price:  S$189.12
You save:  S$54.03
HK$782.28
List Price:  HK$1,095.23
You save:  HK$312.94
CHF 90.61
List Price:  CHF 126.85
You save:  CHF 36.24
NOK kr1,085.23
List Price:  NOK kr1,519.37
You save:  NOK kr434.13
DKK kr692.01
List Price:  DKK kr968.84
You save:  DKK kr276.83
NZ$167.80
List Price:  NZ$234.94
You save:  NZ$67.13
د.إ367.19
List Price:  د.إ514.08
You save:  د.إ146.89
৳10,976.08
List Price:  ৳15,366.96
You save:  ৳4,390.87
₹8,339.52
List Price:  ₹11,675.66
You save:  ₹3,336.14
RM473.25
List Price:  RM662.57
You save:  RM189.32
₦141,842.81
List Price:  ₦198,585.61
You save:  ₦56,742.80
₨27,810.04
List Price:  ₨38,935.18
You save:  ₨11,125.13
฿3,647.70
List Price:  ฿5,106.92
You save:  ฿1,459.22
₺3,232.12
List Price:  ₺4,525.11
You save:  ₺1,292.98
B$499.21
List Price:  B$698.91
You save:  B$199.70
R1,908.54
List Price:  R2,672.04
You save:  R763.49
Лв180.65
List Price:  Лв252.92
You save:  Лв72.26
₩135,197.71
List Price:  ₩189,282.20
You save:  ₩54,084.49
₪368.63
List Price:  ₪516.10
You save:  ₪147.47
₱5,633.91
List Price:  ₱7,887.71
You save:  ₱2,253.79
¥15,144.47
List Price:  ¥21,202.86
You save:  ¥6,058.39
MX$1,659.40
List Price:  MX$2,323.22
You save:  MX$663.82
QR364.31
List Price:  QR510.04
You save:  QR145.73
P1,370.91
List Price:  P1,919.33
You save:  P548.42
KSh13,148.68
List Price:  KSh18,408.68
You save:  KSh5,260
E£4,729.52
List Price:  E£6,621.52
You save:  E£1,892
ብር5,680.63
List Price:  ብር7,953.11
You save:  ብር2,272.48
Kz83,612.74
List Price:  Kz117,061.18
You save:  Kz33,448.44
CLP$97,978.20
List Price:  CLP$137,173.40
You save:  CLP$39,195.20
CN¥722.95
List Price:  CN¥1,012.16
You save:  CN¥289.21
RD$5,921.50
List Price:  RD$8,290.34
You save:  RD$2,368.83
DA13,490.83
List Price:  DA18,887.70
You save:  DA5,396.87
FJ$226.12
List Price:  FJ$316.58
You save:  FJ$90.46
Q779.86
List Price:  Q1,091.83
You save:  Q311.97
GY$20,923.51
List Price:  GY$29,293.76
You save:  GY$8,370.24
ISK kr13,946.60
List Price:  ISK kr19,525.80
You save:  ISK kr5,579.20
DH1,013.19
List Price:  DH1,418.51
You save:  DH405.32
L1,763.34
List Price:  L2,468.75
You save:  L705.40
ден5,702.11
List Price:  ден7,983.18
You save:  ден2,281.07
MOP$805.89
List Price:  MOP$1,128.28
You save:  MOP$322.39
N$1,893.44
List Price:  N$2,650.90
You save:  N$757.45
C$3,681.15
List Price:  C$5,153.75
You save:  C$1,472.60
रु13,335.63
List Price:  रु18,670.42
You save:  रु5,334.78
S/370.84
List Price:  S/519.19
You save:  S/148.35
K382.72
List Price:  K535.82
You save:  K153.10
SAR375
List Price:  SAR525.01
You save:  SAR150.01
ZK2,522.76
List Price:  ZK3,531.96
You save:  ZK1,009.20
L461.43
List Price:  L646.02
You save:  L184.59
Kč2,350.75
List Price:  Kč3,291.15
You save:  Kč940.39
Ft36,729.02
List Price:  Ft51,422.10
You save:  Ft14,693.08
SEK kr1,071.30
List Price:  SEK kr1,499.86
You save:  SEK kr428.56
ARS$85,766.82
List Price:  ARS$120,076.98
You save:  ARS$34,310.16
Bs691.04
List Price:  Bs967.48
You save:  Bs276.44
COP$387,583.68
List Price:  COP$542,632.66
You save:  COP$155,048.97
₡50,832.34
List Price:  ₡71,167.31
You save:  ₡20,334.97
L2,468.78
List Price:  L3,456.40
You save:  L987.61
₲737,805.73
List Price:  ₲1,032,957.54
You save:  ₲295,151.80
$U3,781.90
List Price:  $U5,294.82
You save:  $U1,512.91
zł400.73
List Price:  zł561.05
You save:  zł160.31
Already have an account? Log In

Transcript

Selecting and working with form elements is much easier than other elements. And that's because form elements are able to have a name. Therefore, we can reference them using dot syntax. Or we can also reference them with the get elements by name method. So we have two ways to approach this. Here I have an HTML page with a sample form on it.

And we'll use this to show different ways to access form elements. I'm just going to type some data in there I've got first name, last name and then an email address. There's also a radio button where I can choose to subscribe or not subscribe and then a question. How did you hear about us I'm just going to choose one of those options. Now, let me open up the console. And let's take a look at how we can access these form elements.

Now I mentioned the get elements by name method. So let's try that. I'm going to grab the first name field and I'm going to grab the value from the first name field. So I set fn equal to document dot get elements by name. And then I pass in the name of that input field. And if I jump over to the HTML page, you can see the name that has been assigned to it is first name.

I press return, let me display and you can see that is an array because the method is get elements plural by name. That indicates it is going to return an array. So if there's more than one element that has that name, it will return all of them that have that name. Now I said I was going to grab the value out of that. So let's go ahead and modify this statement. Because it's an array I have to indicate which one I want.

So I'm going to put zero dot value, press return. Now fn contains Steven. So get elements by name will allow you to access any form elements because of the name attribute which they have. However, there may be a bit easier way to do that. Let's say I wanted to grab the value of the email field. So I can simply Use dot syntax.

Let me clear this first document dot. Now the name associated with the form is my form dot, email, dot value. And sure enough, it returns the value of the email field. So I can use the dot syntax to start with document, go to the form and then go to the input filled within that form. Now just like I can retrieve the value, I can also set the value as well. So if someone comes back into a page, and we have some record of information about them, and we just want them to update their email, for example, we would probably like to Set the value of that field to, to the email that we have recorded.

Like so. Now what about radio buttons? Let's say I wanted to change the value of the radio button. I wanted to have the node selected as opposed to the Yes. How would I go about doing that? Well, using dot syntax again, my form dot subscribe is the name associated with the radio buttons.

Value, and I set that equal to no and that will change which is selected. Now the Select element, how do we work with that? Well, let's grab the value first. document.my form dot How here is what we've called it dot value. I press return and evaluate returns is friend. Notice that it's showing a friend as being selected, but the value is friend.

If I jump to the HTML page, you can see that when I select the setup, there are options. And there's a value associated with it with each option, that may not be what necessarily shows up when it's selected. But this is the value that is returned. These are the values I would use if I wanted to set that as well. So let's try that really quick. Set up the Facebook.

And sure enough, it changes the selected value to Facebook. So as you can see, accessing forms is a bit easier than some of the other elements exists in the DOM. You can either use the dot syntax to access those individual form elements. Or you can use the get elements by name method and then specify the name within parentheses. Let's move on to the next topic.

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.