for Teachers for Schools for Enterprise
for Teachers for Schools for Enterprise
Copyright
Course Navigator
Practical Application for JavaScript: Creating Functional FormsNext Lesson 

Updating HTML Form Elements in JavaScript: Explanation & Examples

Chapter 6 /  Lesson 7
Try it risk-free for 30 days
Instructor: Alexis Kypridemos

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.

This lesson explains and demonstrates how to update the values of HTML form fields in several ways, such as with predetermined values, automatically retrieved values and custom input entered by the user.

Sending Data Back to Form Fields

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''.

Updating Form Fields

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.

Updating Fields Based on Another Field's Value

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:

  • Enabling the user to update the form with a custom value they enter
  • Displaying this new custom value in a different form field

Again, let's dive into the example, and we'll explain it underneath.

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days
Description

Earning College Credit

Did you know… We have over 160 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

Transferring credit to the school of your choice

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.

Research Schools, Degrees & Careers

Get the unbiased info you need to find the right school.

Browse Articles By Category

Browse an area of study or degree level.

Recommended Articles
You are viewing lesson Lesson 7 in chapter 6 of the course:

 Back To Course

Introduction to JavaScript

8 chapters | 37 lessons

Ch 6. Forms & JavaScript
Ch 7. The Document Object Model &...

Updating HTML Form Elements in JavaScript: Explanation & Examples Related Study Materials

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account

Explore our library of over 75,000 lessons

Browse by subject
Support