Append a word to ID attribute when it is hidden and remove it when toggle to show

Question

I have two input fields that need to hide when first visit.
There will be a button to toggle it to show the fields so it could be edited.
The appending word (i.e. _temp) with the id is just to change the id name so that it doesn't save over again if it's not necessary. When the fields are showing the append word (_temp) needs to be removed. (i.e. (Original Id Name: payment_gateway_login) (Append Id Name: payment_gateway_login_temp), when fields are showing remove append id name so it should be back to original: payment_gateway_login, the same should follow with id="payment_gateway_password".
Below is as far as I can get. Any help would be greatly appreciated.

HTML:

<ul>
  <li class="show-hide-container hide" style="display: list-item; ">
    <ol>
      <li class="password input required stringish" id="payment_gateway_login_input">
        <input id="payment_gateway_login" name="payment_gateway[login]" type="password">
     </li>
     <li class="password input required stringish" id="payment_gateway_password_input">
       <input id="payment_gateway_password" name="payment_gateway[password]" type="password">
     </li>
   </ol>
 </li>

 <li class="clearfix edit-login-pass"> <a href="#" class="btn" id="show_hide">Edit Login &amp; Password</a>
 </li>
</ul>

JQUERY:

$("input#payment_gateway_login").attr("id", "payment_gateway_login" + "_temp");
$("input#payment_gateway_password").attr("id", "payment_gateway_password" + "_temp");

$("#show_hide").live("click", function(event) {
  return $("li.show-hide-container").toggle("show");
});

When the button is press to show, I need the append text to be removed. Is there a way to do that? — user1598897, Aug 14 '12 at 20:13

score 1 · Accepted Answer · answered Aug 14 '12 at 20:20

Are you looking for something like this?

$('#show_hide').on('click', function(event) {
   if ($('#show-hide-container').is(':visible')) {
      // container is currently visible so hide it and set id to temp
      $('#show-hide-container').hide();
      $('#payment_gateway_login').attr('id', 'payment_gateway_login_temp');
      $('#payment_gateway_password').attr('id', 'payment_gateway_password_temp');
   } else {
      // container is currently hidden so show it and remove temp id
      $('#show-hide-container').show();
      $('#payment_gateway_login_temp').attr('id', 'payment_gateway_login');
      $('#payment_gateway_password_temp').attr('id', 'payment_gateway_password');
   }
});

A few things to note: .live() is deprecated so you may want to use .on() instead. This also won't work unless you change the original id in the html to include _temp.

I wouldn't recommend this approach to begin with though, changing html ids can easily lead to problems. An easier solution would be to run the visible check when you're about to save the information:

if ($('#show-hide-container').is(':visible')) {
    // Save!
}

Hope that helps!

Good answer. I also wanted to add that `.attr()` is also deprecated, in favor of `.prop()` — egbrad, Aug 15 '12 at 15:34
Wow, I had no idea that difference even existed, thanks for the heads up! For anyone who might be curious in the future: http://stackoverflow.com/questions/5874652/prop-vs-attr — BurkDiggler, Aug 17 '12 at 14:30

Append a word to ID attribute when it is hidden and remove it when toggle to show

1 Answers1