Even if one button is pressed, show another item. jQuery

user_14825312 0
Viewed 50

I have a table with user data:

Again StackOverflow swears at "a little text, a lot of code", I have to write a lot of meaningless words, sorry.

$(document).ready(function(){
  $('.fas.fa-edit').click(function(e){
    e.preventDefault();
    $(this).closest('tr').find('.useredit, .fas.fa-times').show();
    $(this).closest('tr').find('.fas.fa-edit, .userdata').hide();
    });

  $('.fas.fa-times').click(function(e){
    e.preventDefault();
    $(this).closest('tr').find('.useredit, .fas.fa-times').hide();
    $(this).closest('tr').find('.fas.fa-edit, .userdata').show();
  });

  ////Here is a question
  if($('.fas.fa-times').is(':visible')){
    $('input.usereditbtn.btn.btn-success').hide();
  }else{
    $('input.usereditbtn.btn.btn-success').show();
  };
  ////Here is a question
});
.useredit, .fas.fa-times, .usereditbtn{
  display:none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table usertable">
   <thead>
   </thead>
   <form class="" action="{{ route('user_edit') }}" method="POST">
      <tbody>
         @csrf
         <tr>
            <th scope="col">Name</th>
            <td class="userdata">Name</td>
            <td class="useredit"><input name="name" placeholder="Write your name">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th scope="col">E-Mail</th>
            <td class="userdata">email@email.com</td>
            <td class="useredit"><input name="email" placeholder="Write your Email">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th scope="col">Phone</th>
            <td class="userdata">555555555</td>
            <td class="useredit"><input name="phone" placeholder="
Enter your phone number">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th></th>
            <td><input class="usereditbtn btn btn-success" type="submit" value="Save"></td>
         </tr>
      </tbody>
   </form>
</table>

I have buttons, each for editing its own field. I need that if at least one button is enabled, then the Save button is visible, if all are closed, then the buttons are not visible.

How can I do that?

css html jquery
3 Answers

I can't find a purpose for having multi buttons/icons while all of them will do the same action .. but anyways you can use .each() inside the edit .click() and times .click() to loop through the buttons/icons

$(document).ready(function(){
$('.usereditbtn').closest('td').hide(0);
$('.fas.fa-edit').click(function(e){
  e.preventDefault();
  $('.usereditbtn').closest('td').show(0);
  $(this).closest('tr').addClass('editing').find('.useredit, .fas.fa-times').show();
  $(this).closest('tr').find('.fas.fa-edit, .userdata').hide();
});
$('.fas.fa-times').click(function(e){
  e.preventDefault();
  $(this).closest('tr').removeClass('editing').find('.useredit, .fas.fa-times').hide();
  $(this).closest('tr').find('.fas.fa-edit, .userdata').show();
  if(!$('tr.editing').length){
    $('.usereditbtn').closest('td').hide(0);
  }
});

////Here is a question
if($('.fas.fa-times').is(':visible')){
  $('input.usereditbtn.btn.btn-success').hide();
}else{
  $('input.usereditbtn.btn.btn-success').show();
};
////Here is a question
});
.useredit, .fas.fa-times{
  display:none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table usertable">
   <thead>
   </thead>
   <form class="" action="{{ route('user_edit') }}" method="POST">
      <tbody>
         @csrf
         <tr>
            <th scope="col">Name</th>
            <td class="userdata">Name</td>
            <td class="useredit"><input name="name" placeholder="Write your name">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th scope="col">E-Mail</th>
            <td class="userdata">email@email.com</td>
            <td class="useredit"><input name="email" placeholder="Write your Email">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th scope="col">Phone</th>
            <td class="userdata">555555555</td>
            <td class="useredit"><input name="phone" placeholder="
Enter your phone number">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th></th>
            <td><input class="usereditbtn btn btn-success" type="submit" value="Save"></td>
         </tr>
      </tbody>
   </form>
</table>

user_33858270

you need to display:block in your top function and display:none in your bottom function. Check code.

$(document).ready(function(){
$('.fas.fa-edit').click(function(e){
e.preventDefault();


$(this).closest('tr').find('.useredit, .fas.fa-times').show();
$(this).closest('tr').find('.fas.fa-edit, .userdata').hide();

var cnt = 0;
var check = document.getElementsByClassName('fa-times')
for (let i = 0; i < check.length;i++){
    if(check[i].style.display != '' && check[i].style.display != 'none')cnt++
}
var save = document.getElementById('save')
if(cnt != 0){
   
   save.className = "usereditbtn btn btn-success"
   save.style.display='block'
}





});
$('.fas.fa-times').click(function(e){
e.preventDefault();

$(this).closest('tr').find('.useredit, .fas.fa-times').hide();
$(this).closest('tr').find('.fas.fa-edit, .userdata').show();

var cnt = 0;
var check = document.getElementsByClassName('useredit')
for (let i = 0; i < check.length;i++){
    if(check[i].style.display != '' && check[i].style.display != 'none')cnt++
}
var save = document.getElementById('save')
if(cnt == 0){ 

   save.className = ""
   save.style.display='none'
   }




});


});
.useredit, .fas.fa-times, #save {
  display:none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table usertable">
   <thead>
   </thead>
   <form class="" action="{{ route('user_edit') }}" method="POST">
      <tbody>
         @csrf
         <tr>
            <th scope="col">Name</th>
            <td class="userdata">Name</td>
            <td class="useredit"><input name="name" placeholder="Write your name">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th scope="col">E-Mail</th>
            <td class="userdata">email@email.com</td>
            <td class="useredit"><input name="email" placeholder="Write your Email">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th scope="col">Phone</th>
            <td class="userdata">555555555</td>
            <td class="useredit"><input name="phone" placeholder="
Enter your phone number">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th></th>
            <td><input id='save'  type="submit" value="Save"></td>
         </tr>
      </tbody>
   </form>
</table>

user_43989660

The first thing that pops in my mind is that you can assign a class to each of those edit buttons once they are clicked.

More precisely, toggle that class (add it when the button is clicked, then remove it when the button is clicked again, you can use toggleClass method in jQuery).

This way, you can use jQuery's hasClass method which returs a boolean if a certain element has a certain class in that moment.

So, all you have to do is grab all of the edit buttons, and run a for loop thorugh them (on every click of one of those buttons, of course), if at least one of them has that extra class you added (meaning that one or more edit buttons are activated in that moment), then you can hide the Save button.

Vice versa, if none of those buttons have that extra class, that means non of them is currently active, and then you can show the Save button again.

Hope I wasnt too confusing here !

Of couse, there are dozens of ways you can do this task, this just happened to pop first in my mind.

user_148317910
Related