title: Auto fill webpage username password using Javascript
body: <p>I'm currently working on an application with a built in web browser. To make life easier for our clients, we have the option for them to store passwords for their websites in their database. Currently, we are using Javascript to pull the information into the browser after the page is loaded. </p>
  
  <p>Here is the script we run on the page that needs user/password loaded....</p>
  
  <p>javascript:</p>
  
  <pre><code>      var pwd="{0}";   //get password from vb.net app
        var usr="{1}";   //get username from vb.net app
        var inputs=document.getElementsByTagName("input");    //look for all inputs
  
        for(var i=0;i&lt;inputs.length;i++){{    //for each input on document
  
              var input=inputs[i];     //look at whatever input
  
              if(input.type=="password"&amp;&amp;(input.name.toLowerCase().indexOf("auth")==-1)){
                      {input.value=pwd}
              }
              if(input.type=="text"&amp;&amp;(input.name.toLowerCase().indexOf("login")!=-1||input.name.toLowerCase().indexOf("user")!=-1||input.name=="AgentAccount")){
                      {input.value=usr}
              }
         }};
  undefined;
  </code></pre>
  
  <p>One of the pages I'm looking at is <a href="https://www.pagepluscellular.com/login/" rel="noreferrer">https://www.pagepluscellular.com/login/</a>    -- the code for the form I'm looking at is this.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;label for="username"&gt;Username:&lt;/label&gt;
      &lt;input name="username" type="text" maxlength="75"&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;label for="password"&gt;Password:&lt;/label&gt;
      &lt;input name="password" type="password" maxlength="50"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And again, this works fine. It populates the password/username field just fine. </p>
  
  <p>My question is why/how, specifically in relation to .indexOf("whatever"). From my understanding, the current script looks for an input, checks if it's a password field or what have you and then sets that field... </p>
  
  <p>But it's never actually looking for those fields. For example on the pagepluscellular website listed above, the input names are "username" and "password", but in our script, it never actually looks for the name "username" or "password".... so how does it know how to fill in those specific inputs?</p>
  
  <p>What I'm trying to do is this. We found a website that this DOESN'T work for. Namely <a href="https://www.boostmobilesales.com/boost-sales-portal/faces/login.jsp" rel="noreferrer">https://www.boostmobilesales.com/boost-sales-portal/faces/login.jsp</a> . The code for the form on this page is...</p>
  
  <pre><code>&lt;input id="loginform:username" type="text" name="loginform:username" "class="outputtext" size="20"&gt;
  &lt;input id="loginform:password" type="password" name="loginform:password" value="" size="20" class="inputSecret"&gt;
  </code></pre>
  
  <p>So I'm 99.99% sure that it's because the name is "loginform:whatever". What I DON'T know is how to tell my script to include this if the name is actually "loginform:whatever". I tried changing my script to this... (just checked if it equaled "loginform:whatever")</p>
  
  <p>javascript:</p>
  
  <pre><code>      var pwd="{0}";   //get password from vb.net app
        var usr="{1}";   //get username from vb.net app
        var inputs=document.getElementsByTagName("input");    //look for all inputs
  
        for(var i=0;i&lt;inputs.length;i++){{    //for each input on document
  
              var input=inputs[i];     //look at whatever input
  
              if((input.type=="password"&amp;&amp;(input.name.toLowerCase().indexOf("auth")==-1)) || input.name.toLowerCase() == "loginform:password"){
                      {input.value=pwd}
              }
              if((input.type=="text"&amp;&amp;(input.name.toLowerCase().indexOf("login")!=-1||input.name.toLowerCase().indexOf("user")!=-1||input.name=="AgentAccount")) || input.name.toLowerCase() == "loginform:username"){
                      {input.value=usr}
              }
         }};
  undefined;
  </code></pre>
  
  <p>but instead of giving me the desired behavior, it ended up breaking the original behavior so that none of it worked (pageplus website stopped pulling username/password). When I reverted back to the original script, it started working again.</p>
  
  <p>Could someone please explain to me the logic behind this line of code?</p>
  
  <pre><code>input.name.toLowerCase().indexOf("auth") == -1 // or !=-1 for "login", etc
  </code></pre>
  
  <p>My understanding is that you are looking at the input name in lowercase, and seeing if it contains the words 'auth'. If it contains 'auth' in the first space, it should fill in the password.... right?</p>
  
  <p>Sorry for the long post, I just wanted to get my thoughts down somewhere and explain all I had tried so far.</p>