
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
Getting HTML form values and display on console in JavaScript?
To get HTML form values, use the value property. Let’s say the following is our input type −
<input type="text" id="getValues" value="My Name is John Smith" />
We need to display the above value “My name is John Smith” on console.
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Document</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/ 4.7.0/css/font-awesome.min.css"> </head> <body> <input type="text" id="getValues" value="My Name is John Smith" /> <script> var originalvalue = document.getElementById("getValues").value; console.log("The value in the text box is ="+originalvalue); </script> </body> </html>
To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.
Output
This will produce the following output −
- Related Articles
- Display the dropdown’s (select) selected value on console in JavaScript?
- Display a message on console while focusing on input type in JavaScript?
- JavaScript: How to loop through all DOM elements on a page and display result on console?
- Get number from user input and display in console with JavaScript
- How can we get the values of a JProgressBar Component and display in Console?
- How to read data from PDF file and display on console in Java?
- JavaScript Adding array name property to JSON object [ES5] and display in Console?
- Select all elements with “data-” attribute with jQuery and display on Console?
- Display all the titles of JTabbedPane tabs on Console in Java
- Getting elements of an array depending on corresponding values of another JavaScript
- Access the file contents from inside the callback function and display on console – jQuery
- Getting the Largest Window Height and Width of the Console in C#
- Getting values from HTML5 Canvas to JavaScript
- Check whether Enter key is pressed or not and display the result in console with JavaScript?
- How to display xtable values in scientific form in R?

Advertisements