Have a Save button appear on clicking Input field

Question

I would like to have a select option in an input field that I would like to have reveal a 'Save' button when it is clicked. It will be a table of email address where the user can change from 'Full Rights' to 'Read only' and once they have chosen to change the setting they can save individually.

So you click the select option - the save button fades in - and once you click the save button the button fades out again.

  <td>
          <div class="input-group input-group-sm">
            <select class="form-control reveal" show-class="show-save">
              <option <%= "selected" if !rights.include?("View") %>>Read Only</option>
              <option <%= "selected" if rights.include?("View") %>>Full Rights</option>
            </select>
          </div>
        </td>
        <td>
          <button type="submit" id="set_permissions_submit" class="save show-save btn btn-primary btn-sm">Save</button>
        </td>

<script type="text/javascript">

$(function () {
  $('.save').hide();

  $('.reveal').focus(function() {
      $('.save').hide();
      $("."+$(this).attr('show-class')).show();
  });

  $('.submit').blur(function() {
      $('.save').hide();
  });
});
</script>

What I have managed to achieve from the above code is to have a the save button appear once you click the select option and it is focussed. But it disappears when the input field is not focused, as opposed to once save is clicked.

Anyone able to help out with the bits I can't achieve?

Thanks, Ciarán

Answer 1

It disappears because you hide it in blur event here:

$('.submit').blur(function() {
    $('.save').hide();
});

You have a single save button, which has both save and show-save classes.

If you want to hide the button after the click, do it like this:

$('.save').click(function() {
    $('.save').hide();
});