How to get the Value of a Textfield after clicking on a Button (JQuery)

1. Include JQuery to your HTML File:

We need the code above to be able to use JavaScript.

2. Create a Textfield:

 

It will look like this:

 

3. Create a Button:

It will look like this:

 

4. Create the JQuery function:

 

As you can see we have to code our function between 'script' tags.
We should always use $(document).ready before other functions to prevent loading errors because this event does not get triggered until all assets such as images have been completely received.


$("#button").click: Let's write the ID of the Button between the brackets and use the .click function. So the function will start after clicking the button with the ID "button".

var value = document.getElementById("textfieldid").value:
We declare the variable value and fill it with the value of the textfield we created above. We could also use .getElementByName(). but we had to replace "textfieldid" with "textfieldname" then. (see 2. Task)

alert(value):  The alert opens the pop up with the text we typed in.

5. Test  

 

Open the file wth you browser!


It will look like this:

If we click on the button this pop up will appear: