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}`);
});
