How to get the form with input type password from a page with multiple forms using Javascript DOM?

user_14618768 0
Viewed 71

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Form.html</title>
    <style type="text/css">
      body {
        margin: 30px;
      }
    </style>
  </head>
  <body>
    <form id="form1">
      <div id="fullnameIDdiv">
        Full Name: <input type="text" name="fullname" /><br />
      </div>
      <div id="usernameIDdiv">
        Username: <input type="text" name="username" /><br />
      </div>
      Password: <input type="password" name="password" /><br />
      <input type="submit" value="Submit" />
    </form>

    <form id="form2">
      <div id="firstName">
        Full Name: <input type="text" name="fname" /><br />
      </div>
      <div id="lastName">
        Username: <input type="text" name="lname" /><br />
      </div>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

For Example, In this page there are two forms. I want to get the form that has the input type = password. I don't want to get the form using its ID(getElementById) because I want to get a more general solution for getting the form, with input type = password out of multiple forms.

I have looked into document.forms.elements but I am not able to get to the solution. Please help.

Edit: In this I have given a sample html code but my question is rather general. The answers given before this edit have used .parentNode() to get the parent node of the input tag. But if the input is under the tags such as <span> or <section> then the .parentNode() would not give the <form> tag. Keeping that in mind, how to get the form tag with input type = password from a page with multiple forms using Javascript DOM?

forms dom html javascript
2 Answers

As your HTML stands now, you can try using querySelector() and parentNode like the following way:

var passForm = document.querySelector('input[type=password]').parentNode;
console.log(passForm);
<form id="form1">
  <div id="fullnameIDdiv">
    Full Name: <input type="text" name="fullname" /><br />
  </div>
  <div id="usernameIDdiv">
    Username: <input type="text" name="username" /><br />
  </div>
  Password: <input type="password" name="password" /><br />
  <input type="submit" value="Submit" />
</form>

<form id="form2">
  <div id="firstName">
    Full Name: <input type="text" name="fname" /><br />
  </div>
  <div id="lastName">
    Username: <input type="text" name="lname" /><br />
  </div>
  <input type="submit" value="Submit" />
</form>

user_74613810

The easiest way to do this is with jQuery.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <form id="form1">
        <div id="fullnameIDdiv">
          Full Name: <input type="text" name="fullname" /><br />
        </div>
        <div id="usernameIDdiv">
          Username: <input type="text" name="username" /><br />
        </div>
        Password: <input type="password" name="password" /><br />
        <input type="submit" value="Submit" />
      </form>
      
      <form id="form2">
        <div id="firstName">
          Full Name: <input type="text" name="fname" /><br />
        </div>
        <div id="lastName">
          Username: <input type="text" name="lname" /><br />
        </div>
        <input type="submit" value="Submit" />
      </form>
      <script>
          $("form>input[type='password']").parent();
      </script>
</body>
user_134685590
Related