Jump to content

Plantilla tpl - cambiar el contenido de un elemento por un icono de fontawesome mediante Jquery


Recommended Posts

Tengo este código HTML en una plantilla TPL que se llama "customer-form.tpl" donde genero una serie de botones en una plantilla TPL para mostrar los campos de edición de un usuario , donde se renderizan los campos que vienen por defecto en prestashop y lo que hago el mismo es en una serie de campos que son "password" y "new_password" añadir un botón al lado para mostrar/ocultar el valor de ese campo.

El código del tpl es este

 

<form action="{block name='customer_form_actionurl'}{$action}{/block}" id="customer-form" class="js-customer-form" method="post">
  <section>
    {block "form_fields"}
      {foreach from=$formFields item="field"}
        {block "form_field"}
          {form_field field=$field}
        {/block}
      {/foreach}
      {$hook_create_account_form nofilter}
    {/block}
  </section>

 

El HTML resultante es algo como esto

 

 

<div class="form-group row ">
    <label class="col-md-3 form-control-label required">
              Contraseña
          </label>
    <div class="col-md-6">

      
        
          <div class="input-group js-parent-focus">
            <input class="form-control js-child-focus js-visible-password" name="password" type="password" value="" pattern=".{5,}" required="">
            <span class="input-group-btn">
              <button class="btn icon-show" type="button" data-action="show-password" data-text-show="Mostrar" data-text-hide="Ocultar"></button>
            </span>
          </div>
    </div>
    <div class="col-md-3 form-control-comment" style="visibility: hidden;">
    </div>
  </div>

 

 

Y luego lo que intento es mediante JS hacer no visible el botón y luego cambiarlo por un icono de "fontawesome"

 

 

$(document).ready(function () {
    $('.form-control-comment').css("visibility", "hidden");
    $('.input-group-btn .btn').addClass('icon-show');
    $('.input-group-btn .btn').empty();
});

 

Este código me funciona la primera vez cuando se carga el código , pero a la que hago click en el botón me vuelve a salir el icono juntamente con el texto inicial... y eso no es corrrecto.

Gracias

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...