Question

0

264

Vistas

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 Respuestas

Responde la pregunta

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 Denunciar

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 Denunciar

Responde la pregunta

Encuentra empleos remotos

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

264

Do 2 functions when button is clicked

3 Respuestas

0

0

0

Encuentra empleos remotos

Andres GPT