- JavaScript Basics
- JavaScript Home
- JavaScript Syntax
- JavaScript Placements
- JavaScript Output
- JavaScript Statements
- JavaScript Keywords
- JavaScript Comments
- JavaScript Variables
- JavaScript var
- JavaScript let
- JavaScript const
- JavaScript var Vs let Vs const
- JavaScript Operators
- JavaScript Comparison/Logical
- JavaScript Data Types
- JS Conditional Statements
- JavaScript Conditional Statement
- JavaScript if Statement
- JavaScript if-else Statement
- JavaScript switch Statement
- JavaScript Loops
- JavaScript for Loop
- JavaScript while Loop
- JavaScript do-while Loop
- JavaScript Break Continue
- JavaScript Popup Boxes
- JavaScript Dialog Box
- JavaScript alert Box
- JavaScript confirm Box
- JavaScript prompt Box
- JavaScript Functions
- JavaScript Functions
- JS Function with Parameter
- JavaScript Return Statement
- JavaScript Variable Scope
- JavaScript setTimeout() Method
- JavaScript setInterval() Method
- JavaScript Events
- JavaScript Events
- JavaScript onclick Event
- JavaScript onload Event
- JavaScript Mouse Events
- JavaScript onreset Event
- JavaScript onsubmit Event
- JavaScript Objects
- JavaScript Objects
- JavaScript Number Object
- JavaScript Array Object
- JavaScript String Object
- JavaScript Boolean Object
- JavaScript Math Object
- JavaScript RegExp Object
- JavaScript Date Object
- JavaScript Browser Objects
- JavaScript Browser Objects
- JavaScript Window Object
- JavaScript Navigator Object
- JavaScript History Object
- JavaScript Screen Object
- JavaScript Location Object
- JavaScript Document Object
- JS Document Object Collection
- JS Document Object Properties
- JS Document Object Methods
- JS Document Object with Forms
- JavaScript DOM
- JavaScript DOM
- JavaScript DOM Nodes
- JavaScript DOM Levels
- JavaScript DOM Interfaces
- JavaScript Cookies
- JavaScript Cookies
- JavaScript Create/Delete Cookies
- JavaScript Advance
- JavaScript Regular Expression
- JavaScript Page Redirection
- JavaScript Form Validation
- JavaScript Validations
- JavaScript Error Handling
- JavaScript Exception Handling
- JavaScript try-catch throw finally
- JavaScript onerror Event
- JavaScript Multimedia
- JavaScript Animation
- JavaScript Image Map
- JavaScript Debugging
- JavaScript Browser Detection
- JavaScript Security
- JavaScript Misc
- JavaScript innerHTML
- JavaScript getElementById()
- JS getElementsByClassName()
- JS getElementsByName()
- JS getElementsByTagName()
- JavaScript querySelector()
- JavaScript querySelectorAll()
- JavaScript document.write()
- JavaScript console.log()
- JavaScript Programs
- JavaScript Programs
- JavaScript Test
- JavaScript Online Test
- Give Online Test
- All Test List
JavaScript Document Object with Forms
The document object provides the forms[] property to select the references of all the form objects of an HTML document. Just by using the index number of forms or by using their names, you are able to access individual forms.
JavaScript Document Object with Forms Example
Here is an example demonstrates document object with forms in JavaScript:
<!DOCTYPE HTML> <html> <head> <title>JavaScript Document Object with Forms</title> <script type="text/javascript"> function order() { var order = "Dear " order = order + document.forms[0].Name.value order = order + ", You have ordered a laptop with size " if(document.forms[0].size.options[0].selected) { order = order + "small" } if(document.forms[0].size.options[1].selected) { order = order + "medium" } if(document.forms[0].size.options[2].selected) { order = order + "large" } order = order + ". The order will be delivered in a " if(document.forms[0].packaging[0].checked) { order = order + "cardboard box" } if(document.forms[0].packaging[1].checked) { order = order + "styrofoam-insulated container" } order = order + " to the address: " order = order + document.forms[0].address.value alert(order) } </script> </head> <body> <h3>JavaScript Document Object with Forms Example</h3> <form action="mailto:shop@codescracker.com" method="post" onSubmit="order()" enctype="text/plain"> Name: <input name="Name" size="20"><br/> Address: <input name="address" size="20"><br/><br/> Laptop Size: <select name="size"> <option>small</option> <option selected>medium</option> <option>large</option> </select><br/> Packaging: <input type="radio" name="packaging">Cardboard Box <input type="radio" name="packaging">Styrofoam-insulated container<br/><br/> <input type="submit" value="Place Order Now"> </form> </body> </html>
Here is the sample output produced by the above JavaScript document object with forms example. This is the initial output:

Now, to place your order, just fill all the field as shown in the following figure:

After filling all the field, just click on Place Order Now button, you will get the following output:

After clicking on the Ok button, a new mail message window appears containing the order details.
« Previous Tutorial Next Tutorial »