Enable and disable input text while clicking on same button

Question

Actually I want to enable the input text by clicking on edit button and if I click again on that edit button, the input text should be in disable mode. I am able to enable but how to disable. here is my code:

<script>
function toggle(){

        document.getElementById("Name").disabled = false;
        document.getElementById("email").disabled = false;
        document.getElementById("contact").disabled = false; 
            }

</script>

<form>
<input type="text" class="form-control" 
            name="name" id="Name" maxlength="30" value="<?=$name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?=$pan; ?>" disabled />

<input type="email" class="form-control" name="mail" id="email" value="<?=$email; ?>" disabled />                                                               

<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?=$mobile; ?>" disabled /> 


<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" 
    onclick="toggle()" >    
</form>

please suggest what i have to make changes in the code.

Possible duplicate of document.getElementById('btnid').disabled is not working in firefox and chrome — GGO
– GGO, Commented Oct 30, 2017 at 8:48

Rory McCrossan · Accepted Answer · 2017-10-30 08:48:02Z

To achieve this you simply need to invert the current value of the disabled property on the required elements. To do that, use the ! operator before the current setting, like this:

function toggle() {
  document.getElementById("Name").disabled = !document.getElementById("Name").disabled;
  document.getElementById("pan").disabled = !document.getElementById("pan").disabled;
  document.getElementById("email").disabled = !document.getElementById("email").disabled;
  document.getElementById("contact").disabled = !document.getElementById("contact").disabled;
}

<form>
  <input type="text" class="form-control" name="name" id="Name" maxlength="30" value="<?= $name; ?>" disabled/>
  <input type="text" class="form-control" name="pan" id="pan" value="<?= $pan; ?>" disabled />
  <input type="email" class="form-control" name="mail" id="email" value="<?= $email; ?>" disabled />
  <input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?= $mobile; ?>" disabled />
  <input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" onclick="toggle()">
</form>

Rory McCrossan · Accepted Answer · 2017-10-30 08:49:14Z

0

<button value="false"></button>

$('#btn_pause_resume').click(function () {
    if ($(this).data('value')==='false') {
        alert('Resumed...');
        $(this).data('value', 'true');
    } else {
        alert('Paused...');
        $(this).data('value', 'false');
    }
});

try this out you should get the idea

edited Oct 30, 2017 at 8:49

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

answered Oct 30, 2017 at 8:47

Mohmmad S

5,1085 gold badges22 silver badges52 bronze badges

2 Comments

Rory McCrossan Over a year ago

I don't see what this has to do with enabling/disabling elements...?

Mohmmad S Over a year ago

this shows you how to control events with same button you can dissable and enable inside that for example insted of ALERT statment , you enable the element

Carsten Løvbo Andersen · Accepted Answer · 2017-10-30 08:49:30Z

You can try it this way. Ask if the element is disabled or not and then set the disabled value based on that.

function toggle() {

  document.getElementById("Name").disabled = document.getElementById("Name").disabled ? false : true;
  document.getElementById("email").disabled = document.getElementById("email").disabled ? false : true;
  document.getElementById("contact").disabled = document.getElementById("contact").disabled ? false : true;
  document.getElementById("pan").disabled = document.getElementById("pan").disabled ? false : true;
}

<input type="text" class="form-control" name="name" id="Name" maxlength="30" value="<?=$name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?=$pan; ?>" disabled />

<input type="email" class="form-control" name="mail" id="email" value="<?=$email; ?>" disabled />

<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?=$mobile; ?>" disabled />


<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" onclick="toggle()">

vicky patel · Accepted Answer · 2017-10-30 10:42:35Z

0

function toggle() {
  var enable = (this.disabled);
  document.getElementById("Name").disabled = enable;
  document.getElementById("pan").disabled = enable
  document.getElementById("email").disabled = enable;
  document.getElementById("contact").disabled = enable;
};

<input type="text" class="form-control" name="name" id="Name" maxlength="30" value="<?=$name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?=$pan; ?>" disabled />

<input type="email" class="form-control" name="mail" id="email" value="<?=$email; ?>" disabled />

<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?=$mobile; ?>" disabled />


<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" onclick="toggle()">

answered Oct 30, 2017 at 10:42

vicky patel

7052 gold badges8 silver badges14 bronze badges

1 Comment

siva kumar Over a year ago

Thank you @vicky patel, but you are only enabling the text but not disabling the text. Rory McCrossan and Carsten Løvbo Andersen code is working according to my requirement. You too can check it once.

Collectives™ on Stack Overflow

Enable and disable input text while clicking on same button

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related