Disable/Enable submit button not working on mobile classes

Question

I have a search form with 3 inputs (2 texts and one dropdown select), and I made a jQuery pre-validation code that disable the submit button unless something is typed on those inputs. Code looks like this:

// Search button is disabled until something is typed.
$(document).ready(function () {
 $('input[type="submit"]').prop('disabled', true);
 $('input[type="text"]').keyup(function () {
   if ($(this).val() != '') {
      $(':input[type="submit"]').prop('disabled', false);
   } else {
      $(':input[type="submit"]').prop('disabled', true);
   }
});
 $('#dropdown').on("change", function () {
   if ($(this).val() == '') {
      $(':input[type="submit"]').prop('disabled', true);
  } else {
      $(':input[type="submit"]').prop('disabled', false);
  }
 });
});

The code works perfectly on web/desktop. Then, I wanted to personalize the page for mobile devices, so I've added the exactly same form with those 3 inputs into the d-block d-sm-none Bootstrap 4 class - the div will be shown only when user is on mobile.

The code is responding while on mobile, it does its job on first two inputs (text ones), but the dropdown select is not doing the trick. Even if I select something from the list, the button is still disabled.

The dropdown code looks like this in both version (desktop and mobile):

<select class="custom-select" name="status" id="dropdown">
<option selected="selected" value="">Find by status</option>
@foreach($status as $sts)
<option value="{{$sts->id}}">{{$sts->name}}</option>
@endforeach
</select>

Any ideas? Thank you!

The code works perfectly - does it? From what I can see, if you type something into the textbox, you get the submit... if you select a dropdown you get the submit... but if you remove the textbox value (leaving the dropdown selection) then you'd lose the submit — freefaller
– freefaller, Commented Jun 18, 2019 at 8:28
Nicely done. But your eagle eye doesn't resolve my problem :) — Cicharito
– Cicharito, Commented Jun 18, 2019 at 8:30
Indeed, but you'll notice I didn't try and answer your problem, because I don't know the answer — freefaller
– freefaller, Commented Jun 18, 2019 at 8:32
Aight. Thanks for the observation tho, it's fixed now! Cheers. — Cicharito
– Cicharito, Commented Jun 18, 2019 at 8:34

Mustapha Larhrouch · Accepted Answer · 2019-06-18 08:45:49Z

3

You need to use class instead of id to select the dropdown :

$(document).ready(function () {
 $('input[type="submit"]').prop('disabled', true);
 $('input[type="text"]').keyup(function () {
   if ($(this).val() != '') {
      $(':input[type="submit"]').prop('disabled', false);
   } else {
      $(':input[type="submit"]').prop('disabled', true);
   }
});
 $('.custom-select').on("change", function () {
   if ($(this).val() == '') {
      $(':input[type="submit"]').prop('disabled', true);
  } else {
      $(':input[type="submit"]').prop('disabled', false);
  }
 });
});

When you use $('#dropdown') your code will be only apply on the first Select in the DOM

answered Jun 18, 2019 at 8:45

Mustapha Larhrouch

3,4053 gold badges16 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Disable/Enable submit button not working on mobile classes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related