How To Create Random Password Generator Using JavaScript

Submitted by: 
Visitors have accessed this post 716 times.

Random Password Generator Using JavaScript

In this article, we are going to learn on how to create Random Password Generator Using JavaScript. This article you can use to your projects or systems. This program work by hitting the Generate Password Button then the random password automatically display in the textbox.

HTML Source Code

Copy and paste this source code to your BODY tag.

  1. <form name="password_generate" style="margin:auto; width:400px; margin-top:100px;">
  3. <input type="text" size=18 name="output" autofocus="autofocus" style="font-family: cursive; text-align: center; color: blue; font-size: 20px; border: 1px solid blue; width: 182px; text-indent: 5px; background: azure;">
  4. <input type="button" value="Generate Password" onClick="execute_To_Generate(this.form.password_Length.value)" style="border-radius: 8px; color: red; background: azure; border: 1px solid red; font-size: 22px;">
  5. <br />
  6. <br />
  7. <b style="font-family:cursive; font-size:23px; color:blue;">Password Length:</b> <input type="text" name="password_Length" value="7"style="font-family: cursive; text-align: center; color: blue; font-size: 20px; border: 1px solid blue; width: 50px; background: azure;" readonly />
  9. </form>


This script for the auto password generator.

  1. <script>
  2. var pattern_list="abcdefghijklmnopqrstuvwxyz123456789"
  3. var example=''
  5. function generate_password(plength){
  6. example=''
  7. for (i=0;i<plength;i++)
  8. example+=pattern_list.charAt(Math.floor(Math.random()*pattern_list.length))
  9. return example
  10. }
  12. function execute_To_Generate(enterlength){
  13. document.password_generate.output.value=generate_password(enterlength)
  14. }
  15. </script>

This is the result:


And, that's it. You have successfully created a simple password generator.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.