CODEWITHSUNDEEP
javascriptc#asp.net-mvc
2766
2766

Reputation: 145

Disable/Enable button when a value appears issue

I have input fields and 3 of them are read-only. I want to check the value of one of the read-only. If exists the submit button should be enabled and if not it stays disabled. How to make the function to work when the value appears in the field actual_operation_date. The problem is I get an error that my function is incorrect.

HTML

<div class="item form-group">
    <label for="ActuallOperationDate" class="control-label col-md-3">Actuall Operation Date</label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input class="form-control col-md-7 col-xs-12" id="Actuall_Operation_Date" name="Actuall_Operation_Date" readonly />
    </div>
</div>

The submit button

<button type="submit" value="Create" id="activeMe" class="btn btn-success" disabled>Submit</button>

Javascript

function activeMe() {
    var ac_opDate = $('#Actuall_Operation_Date').val();

    if (ac_opDate != null) {
        $('#activeMe').attr('disabled', 'disabled');
        //document.getElementById("activeMe").disabled = true;
    }
    else {
        $('#activeMe').removeAttr('disabled');
        // document.getElementById("activeMe").disabled = false;
    }
}

Upvotes: 1

Views: 293

Answers (4)

2766
2766

Reputation: 145

Thank you guys for all your responses 💕. I solved it by the following code 

 $('[name = "Actuall_Operation_Date"]').ready(function () {
                    var ac_opDate = $('#Actuall_Operation_Date').val();
                    if (ac_opDate == null) {
                        $('#activeMe').attr('disabled', 'disabled');

                    }
                    else {
                        $('#activeMe').removeAttr('disabled');

                    }
                })

But I still don't know why my previous code didn't work.

Upvotes: 1

Abhay H Soningra
Abhay H Soningra

Reputation: 113

Since your input field is readonly, There will be change in the value of the input programatically some place. (Unlike manually entering)

Even then, the onchange method of jquery detects on every change in the input fields value. Thus, there can be a event handler on this input (On all your input fields (readonly or not readonly)) and on detecting any change you enable/disable your submit button.

$('#Actuall_Operation_Date')[0].onchange = function () 
{
    if (this.value == '') {
        $('#activeMe').attr('disabled', 'disabled');
    }else {
        $('#activeMe').removeAttr('disabled');
    }
};

Upvotes: 1

ankitkanojia
ankitkanojia

Reputation: 3122

I think code is right but don't know why you getting error, please try below code its work as expected. Hope it helps you.

HTML

<div class="item form-group">
    <label for="ActuallOperationDate" class="control-label col-md-3">Actuall Operation Date</label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input class="form-control col-md-7 col-xs-12" id="Actuall_Operation_Date" name="Actuall_Operation_Date" readonly />
    </div>
</div>

Submit Button

<button type="submit" value="Create" id="activeMe" class="btn btn-success" disabled>Submit</button>

Javascript

function activeMe() {
    var ac_opDate = $('#Actuall_Operation_Date').val();

    if (ac_opDate != null && ac_opDate.length > 0) {
        $('#activeMe').prop('disabled', false);
        //document.getElementById("activeMe").disabled = true;
    }
    else {
        $('#activeMe').prop('disabled', true);
        // document.getElementById("activeMe").disabled = false;
    }
}

Upvotes: 3

Alexis Cabrera Mondeja
Alexis Cabrera Mondeja

Reputation: 104

If your field is readonly and its value changes, I guess you have some process that update that field. If yes, then you can create an onchange event for those readonly fields, check value and then enable submit button.

For example:

 $('#Actuall_Operation_Date').on('change', function(){ 
  if($(this).val()==null || $(this).val()==''){
     $('#activeMe').prop('disabled', true);
  }else{
     $('#activeMe').prop('disabled', false);
   }
  })

If you have a group of fields, then you can use class selector to extend change event for all fields, instead id.

 $('.Actuall_Operation_Date').on('change', function(){ 
  if($(this).val()==null || $(this).val()==''){
     $('#activeMe').prop('disabled', true);
  }else{
     $('#activeMe').prop('disabled', false);
   }
  })

Upvotes: 1

Related Questions