como ver las contraseñas de dos campos password

[Montes28]

Hola amigos espero me puedan ayudar

tengo un formulario donde el usuario cambiara su contraseña , tengo un requerimiento el cual es que el usuario pueda ver como como se compone su contraseña pero necesito verla en los dos campos , hasta el momento solo puedo hacerlo para un campo.

estoy utilizando jQuery showPassword Plugin
http://www.prothemer.com/labs/jquery/showpassword/

Código Javascript:

$(document).ready(function(){
    $('#contrasena_rep').showPassword();
    $('#contrasena').showPassword('.checker', { text: 'Custom Show Password Text', name: 'showmypass' });
        
});
 

este es mi formulario

Código PHP:

<form method="post" action="#" id="myform1">
<label>Contraseña Nueva </label>
<input type="password" name="contrasena" id="contrasena" class="input-xxlarge">
<div class="clear"></div>
<label>Confirmar Contraseña Nueva </label>
<input type="password" name="contrasena_rep" value="" id="contrasena_rep" class="input-xxlarge" />
 

jquery.showpassword.js

Código Javascript:

;(function($){
    $.fn.showPassword = function(ph, options){
    
        var spinput = $(this);
        
        $.fn.showPassword.checker = function(cbid, inid){
            $('input[id="'+cbid+'"]').click(function(){
                if($(this).attr('checked')){
                    $('input.'+inid).val(spinput.val()).attr('id', spinput.attr('id')).attr('name',spinput.attr('name'));
                    $('input.'+inid).css('display', 'inline');
                    spinput.css('display', 'none').removeAttr('id').removeAttr('name');
                }else{
                    spinput.val($('input.'+inid).val()).attr('id', $('input.'+inid).attr('id')).attr('name', $('input.'+inid).attr('name'));
                    spinput.css('display', 'inline');
                    $('input.'+inid).css('display', 'none').removeAttr('id').removeAttr('name');
                }
            });
        }
        
        return this.each(function(){
            var def = { classname: 'class', name: 'password-input', text: 'Show Password' };
            var spcbid = 'spcb_' + parseInt(Math.random() * 1000);
            var spinid = spcbid.replace('spcb_', 'spin_');
            if (spinput.attr('class') !== '') { var spclass = spinid+' '+spinput.attr('class'); }else{ var spclass = spinid; }
            if(typeof ph == 'object'){ $.extend(def, ph); }
            if(typeof options == 'object'){ $.extend(def, options); }
            var spname = def.name;
            // define the class name of the object
            if(def.classname==''){ theclass=''; }else{ theclass=' class="'+def.clasname+'"'; }
            // build the checkbox
            $(this).before('<input type="text" value="" class="'+spclass+'" style="display: none;" />');
            var thecheckbox = '<label><input'+theclass+' type="checkbox" id="'+spcbid+'" name="'+spname+'" value="sp" />'+def.text+'</label>';
            // check if there is a request to place the checkbox in a specific placeholder. 
            // if not, place directly after the input.
            if(ph == 'object' || typeof ph == 'undefined'){ $(this).after(thecheckbox); }else{ $(ph).html(thecheckbox); }
            $.fn.showPassword.checker(spcbid, spinid);
            return this;
        });
    }
})
(jQuery);
 

[fishdesign]

No necesitas plugins ni nada por el estilo. Simplemente cambia el type="password" por type="text"...no tiene más ciencia

Un saludo

[Montes28]

fishdesign gracias por responder

creo que no me hice enterder, el requerimiento que tengo es que el usuario pueda codificar y descodificar un campo tipo password . para un campo lo realizo sin problemas, pero en este formulario tengo dos campos un campo contraseña y otro campo repetir la contraseña.

[NUCKLEAR]

Los campos password no se codifican ni descodifican, simplemente hace que los caracteres no sean visibles. Cuando se enviá los datos se envían de igual manera que un text. A menos que estés inventando algo que estas obviando explicar.

Mira esto quizás te sirva, uso prop() que esta disponible a partir de la versión >1.6 de jquery.

http://jsfiddle.net/2Tj6F/

[Montes28]

NUCKLEAR gracias por responder si es lo que necesito pero en lugar de un button necesito un checkbox.

estoy intentando implementarlo con un checkbox pero se me dificulta un poco ya que apenas estoy aprendiendo

Código HTML:

<form>
    <input type="password" name="foo" />
    <input type="password" name="var" />
<input id="toggleBtn" type="checkbox" name="checkbox" value="Show chars" />    
</form>​
 

Código Javascript:

$('#toggleBtn').toggle(function(){
       $('form input[type="password"]').prop('type','text');
        $('#toggleBtn').is(":checked");
        }, function(){
        $('form input[type="text"]').prop('type','password');
        $('#toggleBtn').removeAttr("checked");
    
    });
 

[NUCKLEAR]

Más fácil aun:
http://jsfiddle.net/nucklear/t2X56/

[Montes28]

NUCKLEAR gracias por la ayuda me sirvió muchisimo

[fishdesign]

Iniciado por Montes28

NUCKLEAR gracias por la ayuda me sirvió muchisimo

Cinco entradas adicionales para llegar exactamente a la misma conclusión que te dije yo en la segunda entrada xDDD

[NUCKLEAR]

Iniciado por fishdesign

Cinco entradas adicionales para llegar exactamente a la misma conclusión que te dije yo en la segunda entrada xDDD

Si no me equivoco, lo que pretendías era hacer que en lugar de password sea un simple text... Supongo que no leíste la premisa principal del problema. En el tercer post lo aclaro en detalle.