javascript – How do I make a modal appear when the disabled button is clicked?-ThrowExceptions

Exception or error:

Bellow is the JS code that makes the button disabled until all the inputs are filled. I need to make a modal appear when it is disabled.

$(document).ready(function() {
  validate_dependent();
  $('#txtDependentName, #txtDependentRelation, #txtDependentBirthDate').change(validate_dependent);
});

function validate_dependent() {
  if ($('#txtDependentName').val().length > 0 && $('#txtDependentRelation').val().length > 0 && $('#txtDependentBirthDate').val().length > 0) {
    $("[name=next_dependent]").prop("disabled", false);
  } else {
    $("[name=next_dependent]").prop("disabled", true);
  }
}
<button type="button" name="next_dependent" class="btn btn-success form-control" style="width:10%; float:right;" onclick="openTab(event, 'educationTab')">Next</button>

How can I do this. Appresiate your answer. Thank you.

How to solve:

You could put a div around the disabled button and attach a click event to that div. Example:

$(document).ready(function() {
    //validate_dependent();
    //$('#txtDependentName, #txtDependentRelation, #txtDependentBirthDate').change(validate_dependent);
    
    $('.disabled-button-wrapper').click(function() {
      console.log('click event works');
      // add your logic here 
    });
});

function validate_dependent() {
    if ($('#txtDependentName').val().length > 0 && $('#txtDependentRelation').val().length > 0 && $('#txtDependentBirthDate').val().length > 0) {
        $("[name=next_dependent]").prop("disabled", false);
    } else {
        $("[name=next_dependent]").prop("disabled", true);
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="disabled-button-wrapper"><button type="button" name="next_dependent" class="btn btn-success form-control" style="width:10%; float:right;">Next</button></div>

Leave a Reply

Your email address will not be published. Required fields are marked *