CODEWITHSUNDEEP
javascriptjquery
ratherBeKiting
ratherBeKiting

Reputation: 275

Disable form fields on input into a group of other fields

I have the below form and would like to use jQuery to do the following:

1/ Disable the fields 'filter_from' and 'filter_to' if any character is entered into any one or more of the fields 'filter_loan_id', 'filter_fname', 'filter_lname', 'filter_postcode'.

2/ Re-enable the fields 'filter_from' and 'filter_to' only if there is no input in any of the fields 'filter_loan_id', 'filter_fname', 'filter_lname', 'filter_postcode'. That is, all 4 of these fields are empty.

I have the below code which works for point 1 - It disables the 2 fields when any of the other fields have data entered.

It does not work as required for point 2 - It currently re-enables the 2 fields if any one of the other fields is cleared. It should only re-enable the 2 fields when all of the other fields are cleared.

The fields 'filter_com' and 'filter_employer' should be ignored. They are only mentioned here to explain that not all of the fields on the form are to be used to disable the other 2 fields, just selected fields.

<form>
  <input name="filter_from" type="text" autocomplete="off">
  <input name="filter_to" type="text" autocomplete="off">
  <input name="filter_loan_id" type="text" autocomplete="off">
  <input name="filter_fname" type="text" autocomplete="off">
  <input name="filter_lname" type="text" autocomplete="off">
  <input name="filter_postcode" type="text" autocomplete="off">
  <input name="filter_com" type="text" autocomplete="off">
  <input name="filter_employer" type="text" autocomplete="off">
</form>

$(document).ready(function() {

    $('input[name=filter_fname], input[name=filter_lname], input[name=filter_loan_id], input[name=filter_postcode]').change(function() {
        if ($(this).val() != '') {
            $('input[name=filter_from]').prop('disabled', true);
            $('input[name=filter_to]').prop('disabled', true);
        } else {
            $('input[name=filter_from]').prop('disabled', false);
            $('input[name=filter_to]').prop('disabled', false);
        }
    });

});

Upvotes: 1

Views: 28

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

Try concatenating the values of all the relevant inputs and use that for checking

$(document).ready(function() {

  var disableable = $('input[name=filter_from], input[name=filter_to]'),
      valuable = $('input[name=filter_fname], input[name=filter_lname], input[name=filter_loan_id], input[name=filter_postcode]').on('input change', function() {

      var combinedValue = valuable.get().map(function(element) {
        return element.value;
      }).join('');

      disableable.prop('disabled', combinedValue !== '');
    });
  valuable.trigger('change');
});
input:disabled{background:#ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
  filter_from<input name="filter_from" type="text" autocomplete="off"><br> filter_to
  <input name="filter_to" type="text" autocomplete="off"><br> filter_loan_id
  <input name="filter_loan_id" type="text" autocomplete="off"><br> filter_fname
  <input name="filter_fname" type="text" autocomplete="off"><br> filter_lname
  <input name="filter_lname" type="text" autocomplete="off"><br> filter_postcode
  <input name="filter_postcode" type="text" autocomplete="off"><br> filter_com
  <input name="filter_com" type="text" autocomplete="off"><br> filter_employer
  <input name="filter_employer" type="text" autocomplete="off">
</form>

Upvotes: 1

Related Questions