How to Change Form Field Value With JavaScript

Save

JavaScript is a client-side scripting language that provides a variety of functions that allow programmers to dynamically change nearly every aspect of a web page's user interface. Many web pages request that visitors complete web forms, typically for the purpose of retrieving and storing information. JavaScript is often used to help users complete user forms by pre-populating common form values, by validating form data to ensure proper formatting and values, and by hiding and showing form fields and content.

Things You'll Need

  • Text Editor
  • Web browser with JavaScript enabled
  • Open a text editor and create a new file named fillForm.html. Add some HTML tags to the file that include an open "<html>" tag, an open "<head>" tag, a closing "</head>" tag, an open "<body>" tag, a closing "</body>" tag, and a closing "</html>" tag. Together, these tags implement a basic HTML page.

    <html>

    <head></head>

    <body></body>

    </html>

  • Add a "<script>" tag between the "<head>" and the "</head>" tags and set the script type to "text/javascript".

    <html>

    <head>

    <script type="text/javascript">

    </script>

    </head>

    <body></body>

    </html>

  • Add a JavaScript function between the "<script>" and "</script>" tags. Name the function fillForm() and include an open curly brace "{" and a close curly brace "}" to indicate where to place the function's code.

    <html>

    <head>

    <script type="text/javascript">

    function fillForm()

    {

    }

    </script>

    </head>

    <body></body>

    </html>

  • Edit the fillForm() function and use a getElementById JavaScript function to set the value of the input field with the id value "formToFill" to the text "Changed Value".

    <html>

    <head>

    <script type="text/javascript">

    function fillForm()

    {

    document.getElementById("formToFill").value = "Changed Value";

    }

    </script>

    </head>

    <body></body>

    </html>

  • Type a "<form>" open tag between the "<body>" and "</body>" HTML tags. Add an "<input>" HTML tag to the form and give it an id "formToFill" and a value "Original Value". Close the "</form>" tag and save fillForm.html.

    <html>

    <head>

    <script type="text/javascript">

    function fillForm()

    {

    document.getElementById("formToFill").value = "Changed Value";

    }

    </script>

    </head>

    <body>

    <form>

    <input id="formToFill" value="Original Value">

    </form>

    </body>

    </html>

  • Add a "<button>" HTML tag to the file and add an onClick() event to the button that calls the fillForm() function. Set the button's text to "Click to change the value in the formToFill input field.". Close the "</button>" tag and save and close fillForm.html.

    <html>

    <head>

    <script type="text/javascript">

    function fillForm()

    {

    document.getElementById("formToFill").value = "Changed Value";

    }

    </script>

    </head>

    <body>

    <form>

    <input id="formToFill" value="Original Value">

    <button type="button" onClick="fillForm()">Click to change the value in the formToFill input field.</button>

    </form>

    </body>

    </html>

  • Open the file in a web browser and click the button to change the text in the form field from the text "Original Value" to "Changed Value".

Tips & Warnings

  • Use <label> tags in web forms to ensure clearly identifiable fields.
  • Adding text to fields is a useful way to help users complete form fields. The onfocus() event can be used to clear the text once the user begins to type actual information into the field.
  • Most web forms are used to gather user data and store that data for some future purpose. There are many database options available that can work with server-side scripts, such as MySQL, Oracle and SQL Server.
  • Dynamically changing values in forms can surprise users. Be sure to message the user appropriately to avoid confusion and frustration.

References

  • Photo Credit Stockbyte/Stockbyte/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!