Random Password Generator using jQuery


Demo :

Example :

The following example shows, how to create random password generator using jQuery includes uppercase letters, lowercase letters, numbers, and special characters with the specified length.

  
<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Password Generator</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
 </head>
 <body>
  <div class="container mt-5">
   <div class="row justify-content-center">
    <div class="col-md-6">        
     <div class="card ">
      <div class="card-header"><h4>Password Generator</h4></div>
      <div class="card-body">
       <label class="form-label">Password Length:</label>
       <input type="number" class="form-control" id="password-length" min="6" max="30" value="12"><br>
       <h6>Password Options:</h6>
        <div class="form-check">
         <input type="checkbox" class="form-check-input" id="uppercase" checked> 
         <label class="form-check-label">Uppercase</label>
        </div>
        <div class="form-check">
         <input type="checkbox" class="form-check-input" id="lowercase" checked> 
         <label class="form-check-label">Lowercase</label>
        </div>
         <div class="form-check">
        <input type="checkbox" class="form-check-input" id="numbers" checked>     
         <label class="form-check-label">Numbers</label>
        </div>
        <div class="form-check">
         <input type="checkbox" class="form-check-input" id="special" checked>     
         <label class="form-check-label">Special Characters</label>
        </div>
        <button id="generate-password" class="btn btn-primary mt-3">Generate Password</button>
      </div>
        <div class="card-footer">
         <h5 id="generated-password" class="mt-3"></h5><br>
        </div>
     </div>
    </div>
   </div>
  </div>
 </body>
 <script>
 $(document).ready(function () {
 $('#generate-password').on('click', function () {
  generatePassword();
 });
 
 function generatePassword() {
  const length = $('#password-length').val();
  const includeUppercase = $('#uppercase').prop('checked');
  const includeLowercase = $('#lowercase').prop('checked');
  const includeNumbers = $('#numbers').prop('checked');
  const includeSpecial = $('#special').prop('checked');
  
  const charset = generateCharset(includeUppercase, includeLowercase, includeNumbers, includeSpecial);
  const password = generateRandomPassword(length, charset);
  
  $('#generated-password').text(password);
 }
 
 function generateCharset(uppercase, lowercase, numbers, special) {
  let charset = '';
  if (uppercase) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  if (lowercase) charset += 'abcdefghijklmnopqrstuvwxyz';
  if (numbers) charset += '0123456789';
  if (special) charset += '!@#$%^&*()_-+=<>?/{}[]';

  return charset;
 }
 
 function generateRandomPassword(length, charset) {
  let password = '';
  const charsetLength = charset.length;
  for (let i = 0; i < length; i++) {
   const randomIndex = Math.floor(Math.random() * charsetLength);
   password += charset.charAt(randomIndex);
  }
   return password;
  }
 });
 </script>
</html>
Try it Yourself