How To Get HTML Input Values Using jQuery

Sharing buttons:

hello in this tutorial we're going to

learn how to use jQuery to get input

values from HTML elements such as input

tags only text boxes radio buttons and

check boxes okay so as you can see I

have a blank HTML page here and what I'm

going to do is I'm going to say what is

your name and then we're going to put it

we're going to do an info box here we're

going to set the type to text okay

the ID will be txt first name alright

and then we're also going to do you're

also going to say let's copy this put

this here and then we're also going to

say your name and then what we're going

to do we're going to use a label where

the label is going to say LBL first name

alright and then we're going to add

another break and then we're going to

add a button put button type 'button

okay and the button Sai but we don't

really need a ID we're going to just put

the value value of the submit data okay

and then and then now now we need to get

jQuery connect to jQuery library so I

already got that link so I'll paste it

in here alright and then then what we

want to do is we want to create a script


right and create a function function

that can be called when the button is

clicked so we say show data okay and

what we want to do is we want to want to

sign this to a variable and we can use

jQuery to get the input the input of our

textbox so come here say dot Val okay

and then once we're done with that we

can say you can use jQuery again to

display the input of our textbox so me

I'm just going to copy this cuz I don't

want to make no mistakes

okay and just say call the HTML method

and what we do to pass F name in there


and now let's look at it in the browser

okay so we have this what is your name

I'll just say Gus and I will click

Submit okay so it didn't work let's go

ahead and turn on Firebug so we can see

why it didn't work let's refresh like

it's not working okay and a reasonable

and there's a reason for that the reason

why is because we're not causing the on

click I'm not calling the function when

a button is clicked so we can come here

save go back to the browser

okay now you have Gus in there

click Submit there you go so we got we

were able to get our input and show it

assign it to a label all right good

so now what we want to do is let's stop

this we want to do is we want to get

input from from a from a radio button so

let's say radio okay and what we're

going to say is what is your favorite

sport okay so we're going to say

baseball all right and I'm just going to

copy that three times because we want to

give the user three options at least

football and soccer depending on what

Potter world you're in you know it might

mean something else to you whatever

wrong here so I'm going to move this and

I'm going to paste this here okay so now

we're going to go to our browser we're

going to take a look at the changes

all right so now we see what is your

favorite sport now when we click you see

how we have Gus in here we click Submit

data we're still getting our name so

that's good now 1 1 is going to test

this out what is your favorite sport

select baseball football soccer ok so we

have something wrong it's letting us

select all three and in this case we

only want to use it to select one ok so

we need to go back and fix it and the

way we fix it is we come into the arm

into this input element and we assign

all of the to one name so we can say

sport ok so let me copy and paste I'm

going to waste time okay alright and

then save now let's go back and refresh

and see what happens so now we do it you

see how you see how it's only allowing

us to select one ok so that's good

alright so now what we want to do is you

want to be able to get whatever sport

that it that the user has chosen ok

we're going to use we're going to do

that with jQuery and and the way we do

that is is fairly easy all we would have

to do is just come here and declare

sport and we will essentially use the

same thing here no actually actually not

only do that

okay so so what we could do is we could

take okay so we could get to use jQuery

great and then okay so so we can still

use jQuery like I would say and we want

to do is want to come here and say if

and then we get the input the input type

and the type that we're working with

right now is radio okay and then we can

say each and then we can call another

function you can pass a function in here

okay and you can like this

okay so refreshing referencing each

radio button in the Dave you say checked

okay and and we'll just we'll just

create a value call sport okay

and what we'll do is we'll go push

whatever is being selected into that

value into that variable e and and the

way the way that we're able to see

what's being selected is by accessing

the name accessing the name okay so

let's let's see if this works

let's just see and for starters what I'm

going to do is start is what I'm going

to do is I'm just going to alert it

let's just alert to see must be in

what's being selected so we just say

sport okay so let's go back to our HTML

may our browser so I'm going to type in

John and then I'm going to select

basketball and I'm going to click select

submit okay so nothing came oh wait

that's the wrong one

okay so Gus is here and then we'll

select baseball submit okay so say that

sport is undefined all right so I guess

when you fix that

and what we do is we'll just go ahead

and go like that okay so now we get what

we want we can change it to football and

it will come up wait

soccer I watch the same sport let's see

let's go back into our code and see

what's going on okay so I'm gonna do

like this and let's see what happens

okay so so I guess I can't do it like

that so I just wanted to just leave it

as an alarm as an array and any time any

time it's clicked

let's see if this will be right we'll

just let's find something that a little

gray balloon

let's see sport let's see what it gives

us do the same thing okay

so we'll get back

all right so let's refresh and we have

guts in there and then we're going to

choose soccer and this s400 I know why I

know do I say that we need to have over

here football soccer okay so I hope this


baseball is good football okay so now

just adding to it okay so so we

definitely don't want that you

definitely don't want that so so we need

to find a way to remove need to find a

way to remove any time the user any time

the user of clicks clicks on a different

sport we need to remove the last four

today selected so let's come here

let's save pop okay let's see that okay

so let's see fish sport so let's go

ahead instead of using the name let's

just use the value

okay so we got that going

all right now now the next thing that we

can do is create a text box create I'll

make check boxes away okay check box and

then we'll group the check boxes let's

see what question we want to ask you can

perhaps X what is your favorite color

okay okay and then we'll just say color

the first value that we're going to have

the first value that we're going to have

will say blue okay

so let's go ahead and copy this okay so

we're going to give you three options so

what is what are your favorite colors

that effect okay the first one is blue

second one is black third one is yellow

okay and we're going to take a look at

it in the browser see how it looks

oh okay hold on I didn't put any text

here so let's say blue black

yellow nice okay

so so we can choose as many as we want

okay so now what we want to do is we

want to want to be able to get the users

input I mean what what checkboxes have

the users checked okay

so so we'll come back into the

JavaScript and essentially it's going to

be the same thing as this force question

so I'll just copy everything okay and

this one I'm going to call it colors now

we're not going to need this because we

want the user to pick whatever okay and

then we're going to go based off of the

name and we're also going to change

change the type of input to checkbox

okay and then we're going to matter of

fact instead of instead of having them

instead of having it pop up an alert

what we can do is we can go ahead and

just put it put it in all lately put my

cat let's put on a paragraph tag we'll

so gonna copy this here paragraph tag

let's go up great so you're looking a

little cleaner all right and then we'll

say ID equals let's say show sport okay

and this here will be ID equals show


all right and then we can just assign it

using jQuery we can assign it to these

paragraph tags

okay so let's clean that's good you can

select multiple checkboxes we can select

only one radio button so now what I want

to do is what I want to do is get the

value it should work right now if it

doesn't work then we'll debug it

let's see soccer that's not what I

wanted okay let's let's come back here

let's see what's going on okay so let's

just put this here actually what you

want to do then we'll use jQuery to and

we can put it in show color show color

text box and they label the paragraph

tag believe and then you can do the same

thing essentially appeared from sport

and you say show sport

you come here refresh okay so we have

Gus in there and I'm choosing baseball

then I'm going to choose black and

yellow and we're going to submit okay

hold on this let's go ahead and change

this instead of name we want it to be

valued okay so we refresh and now I have

Gus as my first as my name my favorite

sport is baseball and favorite color is

black and yellow let's see what happens

we're done so we have thus here says

your name is Gus baseball's my favorite

sport and it showed black and yellow I

mean we could make it look a little

neater but I mean it doesn't really make

that big of a difference yeah so I think

that's it get the picture

try to UM try to manipulate it and do

whatever you want to do you can add it

in any web application that you're doing

yeah so I guess that's that

thank you for watching