CODEWITHSUNDEEP
javascripthtml
Ulquiorra Schiffer
Ulquiorra Schiffer

Reputation: 219

Do 2 functions when button is clicked

I have a button where it will remove the readonly attribute of input and also will show the hidden buttons.

The problem is, I need to click my button 2x so that I can do my 2nd function. My target is, how can I achieve the 1 click button only and it'll do my both functions? Remove readonly and show the hidden button.

Thank you

Fiddle: http://jsfiddle.net/rain0221/qfjar0x1/14/

//removing readonly attribute of input
$(document).ready(function() {
  $('#btnEditAbout').click(function() {
    var Aboutfields = document.getElementsByClassName('abt');
    for (var x = 0; x < Aboutfields.length; x++) {
      Aboutfields[x].removeAttribute('readonly', 'readonly');
    }
  });

  //showing hidden buttons when edit information is clicked

  var btnEditAbout = document.getElementById('btnEditAbout'),
    Removeemp = document.getElementById('Removeemp');
  Addemp = document.getElementById('Addemp');

  function toggle() {
    if (btnEditAbout.style.display === "block") {
      btnEditAbout.style.display = "none";
      Addemp.style.display = "block";
      Removeemp.style.display = "block";
    } else { // switch back
      btnEditAbout.style.display = "block";
      Addemp.style.display = "none";
      Removeemp.style.display = "none";
    }
  }
  btnEditAbout.onclick = toggle;
});
#btnEditAbout {
  display: block;
}

#Addemp {
  display: none;
}

#Removeemp {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">
<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right" style="float:right;" id="btnEditAbout" type="button"><i class="fas fa-edit"></i> Edit Information </button>
<!-- hidden 2 buttons -->
<button id="Addemp" type="button">Add Record </button>
<button id="Removeemp" type="button">Remove Record </button>

Upvotes: 0

Views: 73

Answers (3)

mplungjan
mplungjan

Reputation: 178403

You cannot click a hidden button

You CAN use jQuery more than you do

$(function() {
  $('.toggle').on("click", function() {
    const edit = this.id === "btnEditAbout"; // what did we click 
    $("#Addemp").toggleClass('hide',!edit)
    $("#Removeemp").toggleClass('hide',!edit)
    $("#btnCancel").toggleClass('hide',!edit)
    if (edit) $(".abt").removeAttr('readonly');
    else  $(".abt").attr('readonly',true);
  });
});
.hide { display: none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">


<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right toggle" style="float:right;" id="btnEditAbout" type="button"><i class="fas fa-edit"></i> Edit Information </button>


<!-- hidden 2 buttons -->
<button id="Addemp" type="button" class="hide">Add Record </button>
<button id="Removeemp" type="button" class="hide">Remove Record </button>
<button id="btnCancel" type="button" class="hide toggle">Cancel</button>

Upvotes: 2

Nitheesh
Nitheesh

Reputation: 20016

You are using onclick event twice. You can combine then into one single event like below.

Also rather than checking btnEditAbout.style.display you could check for the window.getComputedStyle of same node. This will check the inline style aswell as the css styles.

Working Example

$(document).ready(function () {
  var btnEditAbout = document.getElementById('btnEditAbout');
  var Removeemp = document.getElementById('Removeemp');
  var Addemp = document.getElementById('Addemp');

  function toggle() {
    
    var Aboutfields = document.getElementsByClassName('abt');
    for (var x = 0; x < Aboutfields.length; x++) {
      Aboutfields[x].removeAttribute('readonly', 'readonly');
    }
    const computedStyle = window.getComputedStyle(btnEditAbout);
    if (computedStyle.display === "block") {
      btnEditAbout.style.display = "none";
      Addemp.style.display = "block";
      Removeemp.style.display = "block";
    } else { // switch back
      btnEditAbout.style.display = "block";
      Addemp.style.display = "none";
      Removeemp.style.display = "none";
    }
  }
  btnEditAbout.onclick = toggle;
});
#btnEditAbout {
  display: block;
}

#Addemp {
  display: none;
}

#Removeemp {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">
<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right" style="float:right;" id="btnEditAbout" type="button"><i
    class="fas fa-edit"></i> Edit Information </button>
<!-- hidden 2 buttons -->
<button id="Addemp" type="button">Add Record </button>
<button id="Removeemp" type="button">Remove Record </button>

Upvotes: 0

Vijay Kumawat
Vijay Kumawat

Reputation: 963

You can simply call the toggle(); inside the click event of your edit button

//removing readonly attribute of input
$(document).ready(function() {
  $('#btnEditAbout').click(function() {
    var Aboutfields = document.getElementsByClassName('abt');
    for (var x = 0; x < Aboutfields.length; x++) {
      Aboutfields[x].removeAttribute('readonly', 'readonly');
    }
    toggle(); // call the function here
  });

  //showing hidden buttons when edit information is clicked

  var btnEditAbout = document.getElementById('btnEditAbout'),
    Removeemp = document.getElementById('Removeemp');
  Addemp = document.getElementById('Addemp');

  function toggle() {
    if (btnEditAbout.style.display === "block") {
      btnEditAbout.style.display = "none";
      Addemp.style.display = "block";
      Removeemp.style.display = "block";
    } else { // switch back
      btnEditAbout.style.display = "block";
      Addemp.style.display = "none";
      Removeemp.style.display = "none";
    }
  }
  btnEditAbout.onclick = toggle;
});
#btnEditAbout {
  display: block;
}

#Addemp {
  display: none;
}

#Removeemp {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">
<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right" style="float:right;" id="btnEditAbout" type="button"><i class="fas fa-edit"></i> Edit Information </button>
<!-- hidden 2 buttons -->
<button id="Addemp" type="button">Add Record </button>
<button id="Removeemp" type="button">Remove Record </button>

Upvotes: 0

Related Questions