CODEWITHSUNDEEP
javascriptjquery
siva kumar
siva kumar

Reputation: 35

Enable and disable input text while clicking on same button

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.

Upvotes: 0

Views: 2140

Answers (4)

vicky patel
vicky patel

Reputation: 705

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()">

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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()">

Upvotes: 0

Mohmmad S
Mohmmad S

Reputation: 5088

<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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

Related Questions