Question

0

263

Views

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>

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report

0

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>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T06:18:46.143Z

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>

0

263

Do 2 functions when button is clicked

3 answers

0

0

0

Find remote jobs

Andres GPT