Alexis is a technical writer for an IT company and has worked in publishing as a writer, editor and web designer. He has a BA in Communication.
As the term form implies, these are almost always used to collect data the user inputs for further processing. In other words, we generally use forms to get data from them, and not insert data into them. However, we can use JavaScript to do exactly that: enter data into form fields. Let's view an example straight away to illustrate how this works.
You are encouraged to copy the code examples in this lesson and paste them into a free online emulator, or save them locally as a .html file and open it in a web browser.
<!DOCTYPE html>
<body>
<form>
<input type = "text" id="input">
<button type = "button" onclick="update()">Auto-fill form field</button>
</form>
<script>
function update(){
document.getElementById("input").value = "This is an auto-generated value";
}
</script>
</body>
</html>
In this simple example, we have an HTML form with only one text input and a ''Submit'' button, which calls the JavaScript function update() in the <script> tag.
For the function to work, it's important to identify the text input in the JavaScript code. There are several ways of doing this, but the most straightforward is to use the document.getElementById() method.
Therefore, when creating the HTML form, we need to make sure that we give the input field an ID. In this case, we've given the text input element the imaginative ID of ''input''.
The <button> element calls the update() function when clicked. Incidentally, we've used a button to call the function as opposed to an <input type = "submit"> element, because while that would also call the function, that would display the desired results for a fraction of a second, and then the page would reload. Using the button instead, we get the results to stay on the page.
Moving on to the update() function itself, we see that it first identifies the text input using document.getElementById("input"), and then immediately sends a value to it with the value method. In this case, the value is the text: ''This is an auto-generated value''.
The previous example sent data back to an HTML form field, but only with a static, pre-configured text value. In other words, no matter how many times we press the ''Submit'' button, the text input will display ''This is an auto-generated value''.
So let's change our example and make it a little more interesting. Now, each time we press the button, we'll get a different value; the number of seconds from the current time:
<!DOCTYPE html>
<body>
<form>
<input type = "text" id="input">
<button type = "button" onclick="seconds()">Display seconds</button>
</form>
<script>
function seconds(){
var date = new Date();
var seconds = date.getSeconds();
document.getElementById("input").value = seconds;
}
</script>
</body>
</html>
Our new example works in the same way, by calling a function, in this case seconds(), by clicking the ''Submit'' button. The function again identifies the <input> element using the document.getElementById() method.
However, here we take advantage of some of JavaScript's built-in date methods: new Date() and getSeconds().
For these to work, we first create the new variable date with this line of code:
var date = new Date();
Having created this date object, we then get the seconds' value from the current time and store it into another new variable, seconds, with this line:
var seconds = date.getSeconds();
Lastly, we display this value in the text input the same way as in the previous example. This example is a little more fun, because it will display a different number of seconds in the text input each time we click the button.
So far we've seen how to 'print' a value inside an HTML form field. This value is either predetermined inside the JavaScript code, or a value that can be automatically retrieved by the code, like the current time.
Now let's introduce two new techniques:
Again, let's dive into the example, and we'll explain it underneath.
<!DOCTYPE html>
<body>
<form>
<input type = "text" id="input">
<button type = "button" onclick="userValues()">Submit your own data</button>
</form>
<form>
<input type = "text" id="output">
</form>
<script>
function userValues(){
var userInput = document.getElementById("input").value;
document.getElementById("output").value = userInput;
}
</script>
</body>
</html>
First of all, in this example we've included two HTML forms, not one. The first one is the same as in the previous two examples, except now the ''Submit'' button calls the userValues() function when clicked.
The second form is almost identical to the first, with two key differences: the <input> element has a different ID, output, and it does not include a ''Submit'' button, as it does not need one.
In the userValues() function, we create a new variable, userInput, and store in it the value the user enters in the first form with this line of code:
var userInput = document.getElementById("input").value;
The second line of code identifies the second form's text input by its ID, and displays in it the value stored in the userInput variable:
document.getElementById("output").value = userInput;
As an exercise, see if you can combine all three examples into a single HTML file. Include the three different ''Submit'' buttons in the first form, and the three different JavaScript functions one after the other in the <script> element.
In this lesson, we demonstrated three ways of manipulating HTML form fields using JavaScript. All three ways used the document.getElementById() method to identify the target elements by their IDs. In the first, we filled in an empty form field with a predetermined value. In the second, we used JavaScript date methods to fill the form with new values on each button click. And in the third, we captured the user input entered in the first form and displayed it in a second form.
To unlock this lesson you must be a Study.com Member.
Create your account
Already a member? Log In
BackAlready registered? Log in here for access
Did you know… We have over 200 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.
To learn more, visit our Earning Credit Page
Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.
Back To Course
Introduction to JavaScript8 chapters | 51 lessons
{{courseNav.course.topics.length}} chapters | {{courseNav.course.mDynamicIntFields.lessonCount}} lessons | {{course.flashcardSetCount}} flashcard set{{course.flashcardSetCoun > 1 ? 's' : ''}}
Your Cart is Empty. Please Choose a Product.
Watch 5 minute video clips, get step by step explanations, take practice quizzes and tests to master any topic.
Study.com has a library of 550,000 questions and answers for covering your toughest textbook problems
I love the way expert tutors clearly explains the answers to my homework questions. Keep up the good work!
- Maritess, College StudentStudy.com video lessons have helped over 30 million students.
"I learned more in 10 minutes than 1 month of chemistry classes"
- Ashlee P.
"I learned more in 10 minutes than 1 month of chemistry classes"
- Ashlee P.
"I aced the CLEP exam and earned 3 college credits!"
- Clair S.
Over 65 million users have prepared for {{displayNameByProductKey[registrationData.product || testPrepCocoon]}} and other exams on Study.com
"The videos have changed the way I teach! The videos on Study.com accomplish in 5 minutes what would take me an entire class."
- Chris F.
Over 65 million users have prepared for {{displayNameByProductKey[registrationData.product || testPrepCocoon]}} and other exams on Study.com
Over 65 million users have prepared for {{displayNameByProductKey[registrationData.product || testPrepCocoon]}} and other exams on Study.com
