Toggle input on button click

Question

I am trying to achieve something very simple but I can't figure it out. I would like to disable an input field whenever a button is clicked, then re-enable it when the button is clicked again.

I'm surely making this overly difficult (new to JS).

My current code is here in this FIDDLE.

Any help is appreciated. An explanation of what I have been doing wrong would also be great as I'd like to learn :)

$(document).ready(function() {

  var toggleText = $("#ip").val();
  
  $("#ipclear").click(function() {
    if ($("#ip").val() != 'N/A') {
      toggleText = $("#ip").val();
      $("#ip").val('N/A');
      $("#ip").prop("disabled", false);
    } else
      $("#ip").val(toggleText);
      $(this).toggleClass('btn-default').toggleClass('btn-warning');
      $("#ip").prop("disabled", true);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group">
  <input type="text" name='ip' id="ip" class='form-control' value="1.2.3.4">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" id="ipclear">Not Applicable</button>
  </div>
</div>

thanks @gcampbell for that, but when I add the missing braces it doesn't fix the issue. Actually it behaves differently - almost the opposite of what I want. — jonboy
– jonboy, Commented Jul 20, 2016 at 11:43
@johnny_s well yes, but you obviously forgot the brackets, so now you start again, with the brackets, and see what else you have to edit. — Emmanuel Delay
– Emmanuel Delay, Commented Jul 20, 2016 at 11:45

Zakaria Acharki · Accepted Answer · 2016-07-20 11:59:43Z

2

Working fiddle

You've to add braces {} arround else statement code or just first line $("#ip").val(toggleText); will be considered as else code :

$(document).ready(function() {
    var toggleText = $("#ip").val();

    $("#ipclear").click(function() {

        if ($("#ip").val() != 'N/A') {
            toggleText = $("#ip").val();

            $("#ip").val('N/A');
            $("#ip").prop("disabled", true);
            $(this).removeClass('btn-default').addClass('btn-warning');
        } else{
            $("#ip").val(toggleText);
            $("#ip").prop("disabled", false);
            $(this).removeClass('btn-warning').addClass('btn-default');
        }

    });
});

Note : you have to use addClass()/removeClass(); instead of toogleClass() in your case.

Hope this helps.

edited Jul 20, 2016 at 11:59

answered Jul 20, 2016 at 11:42

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zakaria Acharki Over a year ago

You're welcome, so you have just to change the boolean inside $("#ip").prop("disabled", false); to true and false will be in else statement, check my updated fiddle.

Zakaria Acharki Over a year ago

For the button class check please if that what you want Here.

jonboy Over a year ago

Quick question, this works perfect however when the input is disabled the data doesn't post to my database. Whenever I remove the disabled it posts fine - any ideas?

Zakaria Acharki Over a year ago

Yes that normal @johnny_s you have to use readonly attribute instead of disabled so just replace it in the code.

Mayank Pandeyz · Accepted Answer · 2016-07-20 11:43:59Z

0

Try this :

$('#ipclear').click(function(){
            var attr = $('#ip').attr('disabled');
            if(attr == null)
            {
                $('#ip').attr('disabled', true);
            }
            else
            {
                $('#ip').attr('disabled', null);
            }
        });

answered Jul 20, 2016 at 11:43

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Comments

Dhrumin · Accepted Answer · 2016-07-20 11:44:58Z

0

You need to manage with ToggleClass(). On click button add one toggleclass on input and check this class condition for disabled.

$(document).ready(function() {

  var toggleText = $("#ip").val();

  $("#ipclear").click(function() {
    $("#ip").toggleClass("click");
    if ($("#ip").hasClass('click')) {
      toggleText = $("#ip").val();
      $("#ip").val('N/A');
      $("#ip").prop("disabled", false);
    } else
      $("#ip").val(toggleText);
      $(this).toggleClass('btn-default').toggleClass('btn-warning');
      $("#ip").prop("disabled", true);
  });

});

answered Jul 20, 2016 at 11:44

Dhrumin

3813 silver badges16 bronze badges

Comments

rejo · Accepted Answer · 2016-07-20 11:47:55Z

Try this , its working

$(document).ready(function() {

  var toggleText = $("#ip").val();
  
  $("#ipclear").click(function() {
  
    if ($("#ip").val() == 'N/A') {
    $("#ip").val(toggleText);
      toggleText = $("#ip").val();
      $("#ip").prop("disabled", false);
    } else{
     
        $("#ip").val('N/A');
      $(this).toggleClass('btn-default').toggleClass('btn-warning');
      $("#ip").prop("disabled", true);
      }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">

<div class="input-group">
  <input type="text" name='ip' id="ip" class='form-control' value="1.2.3.4">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" id="ipclear">Not Applicable</button>
  </div>
</div>

Collectives™ on Stack Overflow

Toggle input on button click

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related