What event is used when the input value is not blank

Question

I need to enable/disable a button based on a input field. If the input field has a value, the button should be enabled. If the input field is empty, the button should be disabled. Now when the user selects a value from the input field cookie, How do I capture? I tried with "change" but it didn't work.

The tried the below code with "change" event:

<script>
$(function() {
$("#myInput").change(showSaveBtn);

var showSaveBtn = function() {
            validateInput();
            if (myInputEntered== true) {
                $('#save').removeClass("disabled").prop(
                        'disabled', "disabled").removeAttr("disabled");
            } else {
                $('#save').addClass("disabled").prop(
                        'disabled', "disabled");
            }
        }

var validateInput= function() {
            if ($.trim($("#myInput").val()) === '')
                myInputEntered= false;
            else
                myInputEntered= true;
        }
});
</script>

Based on #myInput value, I need to enable/ disable #save button. Looking forward for the answers.

thanks, Iswarya

Does this answer your question? [JQuery: detect change in input field](https://stackoverflow.com/questions/12797700/jquery-detect-change-in-input-field) — Charlie, Jul 07 '20 at 05:02

score 0 · Answer 1 · answered Jul 07 '20 at 05:02

It is very likely that by the time you hook the event, the DOM element was not loaded. You need to wait until the DOM is loaded to hook the events.

$(document).ready(function(){

 
  var inputChanged = function() {

     
     var myInputEntered = validateInput();
     console.log(myInputEntered);
            
     if (!myInputEntered)
        $('#save').hide()
     else 
        $('#save').show();
          
  }

  var validateInput= function() {
     return $.trim($("#myInput").val()) !== ''
  }
  
  
  $("#myInput").keyup(inputChanged);


  inputChanged();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="myInput">

<input type="button" value="save" id="save">

score 0 · Accepted Answer · answered Jul 07 '20 at 05:06

0

 $("#save").prop('disabled', true);
    $("#myinput").on('change keydown paste input propertychange click keyup blur', function(){
    $("#save").prop('disabled', $('#myinput').val().length>0? false:true);
})

<input type="text" id="myinput">

<button id="save">
save
</button> 



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

you can write it like this too. hope this will help you. here is jsfiddle link

answered Jul 07 '20 at 05:06

CodeBug

1,649
1
8
23

worked with the following code: `$("#myinput").on('input', function(){ $("#save").prop('disabled', $('#myinput').val().length>0? false:true); });` Thank you – Iswarya Ramani Jul 07 '20 at 14:25
happy to help.. happy coding:-) – CodeBug Jul 07 '20 at 14:29

What event is used when the input value is not blank

2 Answers2