1

Lo que estoy haciendo es tener dos inputs uno a lado del otro con un checkbox que lo que hace es convertir el tipo de text a password y un botón de agregar una nueva fila.

Imagen De los inputs Imagen De los inputs

Y al darle click en add row se agrega en la parte de abajo: introducir la descripción de la imagen aquí

Pero el problema es que quiero que el segundo input pueda ser intercambiado entre texto y password y cuando se agregue abajo se quede con el tipo que le asigne.

¿Cómo puedo lograr esto con Jquery?

Parte de mi HTML es este:

<div class="span-23 margin_bot margin_top_b text_form_fieldname">
                <div class="margin_bot" id="itemRows2">
                    <input class="input_text input_size text_input span-6" type="text" name="add_qty" size="4" placeholder="Variables"/> 
                    <input id="password" class="input_text input_size text_input margin_bot span-11" type="text" name="add_name" placeholder="Valor" />
                    <span class="float_left margin_right">
                        <input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'password' : 'text'">
                    </span>
                    <input onclick="addRow2(this.form);"  class="button blue margin_bot" type="button" value="Add row" />
                </div>
            </div>

Y mis funciones de Jquery son estas:

var row2Num = 0;
function addRow2(frm) {
    row2Num ++;
    var row = '<p id="rowNum'+row2Num+'"><input class="input_text input_size text_input span-6" type="text" name="qty[]" size="4" value="'+frm.add_qty.value+'" placeholder="Variable" disabled><input class="input_text input_size text_input span-11" type="text" name="'+frm.add_qty.value+'" value="'+frm.add_name.value+'" placeholder="Valor"><span class="float_left margin_right"><a class="link_pointer" onclick=""><img alt="Ocultar" src="/static/img/icon_locked.png" title="Ocultar"></a></span><input  class="delete-row button green" type="button" value="Remove" onclick="removeRow('+row2Num+');"></p>';
    jQuery('#itemRows2').append(row);
    frm.add_qty.value = '';
    frm.add_name.value = '';
    }

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
    }
1
  • esta parte <input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'password' : 'text'"> realmente te funciona? <b/r> porque no lo cambian por <input type="checkbox" onchange="this.checked ? 'password' : 'text' ">
    – junior
    Commented el 17 ago. 2018 a las 21:39

2 respuestas 2

1

Lo harias de la misma manera que hiciste con el checkbox. Algo asi:

var row2Num = 0;
function addRow2(frm) {
    row2Num ++;
    var type = document.getElementById('password').type;
    var row = '<p id="rowNum'+row2Num+'"><input class="input_text input_size text_input span-6" type="text" name="qty[]" size="4" value="'+frm.add_qty.value+'" placeholder="Variable" disabled><input class="input_text input_size text_input span-11" type="' + type + '" name="'+frm.add_qty.value+'" value="'+frm.add_name.value+'" placeholder="Valor"><span class="float_left margin_right"><a class="link_pointer" onclick=""><img alt="Ocultar" src="/static/img/icon_locked.png" title="Ocultar"></a></span><input  class="delete-row button green" type="button" value="Remove" onclick="removeRow('+row2Num+');"></p>';
    jQuery('#itemRows2').append(row);
    frm.add_qty.value = '';
    frm.add_name.value = '';
    }

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
<div class="span-23 margin_bot margin_top_b text_form_fieldname">
                <div class="margin_bot" id="itemRows2">
                    <input class="input_text input_size text_input span-6" type="text" name="add_qty" size="4" placeholder="Variables"/> 
                    <input id="password" class="input_text input_size text_input margin_bot span-11" type="text" name="add_name" placeholder="Valor" />
                    <span class="float_left margin_right">
                        <input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'password' : 'text'">
                    </span>
                    <input onclick="addRow2(this.form);"  class="button blue margin_bot" type="button" value="Add row" />
                </div>
            </div>
</form>

1
  • 1
    Esto es lo que queria! Funciona perfecto!
    – Rafael
    Commented el 17 ago. 2018 a las 21:38
0

Prueba con este:

<input type="checkbox" onchange="this.checked ? $('#password'').attr("type", 'password') : $('#password'').attr("type", 'text')">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.