jQuery password generator

Question

I have the following JS code that checks a password strength and also creates a random password as well. What I want to do is edit the code so that instead of putting the generated password inside the password field it will put it inside a span tag with say an id of randompassword. In addition that I would like it so that by default there will be a random password inside the span tag and then when the user clicks the button it will generate another one. And also move the link to be next to span tag rather than the password box.

Thanks.

Here is the code:

$.fn.passwordStrength = function( options ){
 return this.each(function(){
  var that = this;that.opts = {};
  that.opts = $.extend({}, $.fn.passwordStrength.defaults, options);

  that.div = $(that.opts.targetDiv);
  that.defaultClass = that.div.attr('class');

  that.percents = (that.opts.classes.length) ? 100 / that.opts.classes.length : 100;

   v = $(this)
  .keyup(function(){
   if( typeof el == "undefined" )
    this.el = $(this);
   var s = getPasswordStrength (this.value);
   var p = this.percents;
   var t = Math.floor( s / p );

   if( 100 <= s )
    t = this.opts.classes.length - 1;

   this.div
    .removeAttr('class')
    .addClass( this.defaultClass )
    .addClass( this.opts.classes[ t ] );

  })
  .after('<a href="#">Generate Password</a>')
  .next()
  .click(function(){
   $(this).prev().val( randomPassword() ).trigger('keyup');
   return false;
  });
 });

 function getPasswordStrength(H){
  var D=(H.length);
  if(D>5){
   D=5
  }
  var F=H.replace(/[0-9]/g,"");
  var G=(H.length-F.length);
  if(G>3){G=3}
  var A=H.replace(/\W/g,"");
  var C=(H.length-A.length);
  if(C>3){C=3}
  var B=H.replace(/[A-Z]/g,"");
  var I=(H.length-B.length);
  if(I>3){I=3}
  var E=((D*10)-20)+(G*10)+(C*15)+(I*10);
  if(E<0){E=0}
  if(E>100){E=100}
  return E
 }

 function randomPassword() {
  var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$_+?%^&)";
  var size = 10;
  var i = 1;
  var ret = ""
  while ( i <= size ) {
   $max = chars.length-1;
   $num = Math.floor(Math.random()*$max);
   $temp = chars.substr($num, 1);
   ret += $temp;
   i++;
  }
  return ret;
 }

};

$(document)
.ready(function(){
 $('#password1').passwordStrength({targetDiv: '#iSM',classes : Array('weak','medium','strong')});

});

Answer 1

This line:

$(this).prev().val( randomPassword() ).trigger('keyup');

is inserting the value after a click. So you can change that value to stick the password wherever you want it. For example you could change it to:

$('span#randompassword').html(randomPassword());

You could also run this when the page loads to stick something in that span right away:

$(document).ready(function(){
     $('span#randompassword').html(randomPassword());
});