HTML form elements such as textbox, radio button, checkbox, and others have the name
attribute. JavaScript allows you to select these elements using the document.getElementsByName()
method.
let formElements = document.getElementsByName('name')
In the following example, you will learn how to use the getElementsByName()
method to get the text entered by the user in the input box.
HTML Code
<!DOCTYPE html> <html> <head> <title>JavaScript document.getElementsByName() Example</title> </head> <body> <input type="text" name="credentials" /> <input type="password" name="credentials" /> <input type="button" name="submit" value="Submit" /> <script src="app.js"></script> </body> </html>
JavaScript Code: app.js
let btn = document.getElementsByName('submit'); btn[0].addEventListener('click', ()=>{ let credentials = document.getElementsByName('credentials'); console.log(`Username: ${credentials[0].value}`); console.log(`Password: ${credentials[1].value}`); });