CODEWITHSUNDEEP
javascriptjqueryhtml
tweetok
tweetok

Reputation: 70

Changing button from disabled to enabled when both data attributes are not empty

I'm trying to change the button from disabled to enabled when both data-attributes are NOT empty.

I dont get any errors but everytime I fill the data-attributes its not changing its disabled/enabled attribute.

I've tried it like this but nothing is happening, my browsers console isnt printing out anything.

<select class="form-control os" name="os">
  <option disabled selected>Please choose...</option>
  <option>Ubuntu Server 18.04</option>
  <option>Ubuntu Server 16.04</option>
  <option>Ubuntu Server 14.04</option>
</select>

<select class="form-control location" name="location">
  <option value="" disabled selected>Please choose...</option>
  <option value="Sydney">Sydney</option>
  <option value="Tokyo">Tokyo</option>
  <option value="Sao Paulo">São Paulo</option>
</select>

<button class="btn btn-primary btn-lg float-right btn-buynow" data-shoppy-product="ewAfime" data-shoppy-os="" data-shoppy-location="" disabled>Buy now</button>

$(document).ready(function(){
    $("select.location").change(function(){
        var selectedLocation = $(this).children("option:selected").val();
        $('.btn-buynow').attr('data-shoppy-location', selectedLocation);
    });
    $('select.os').change(function() {
        var selectedOS = $(this).children("option:selected").val();
        $('.btn-buynow').attr('data-shoppy-os', selectedOS);
    });

    var $buynow = $('.btn-buynow');
    if (typeof $buynow.data('shoppy-os') !== 'undefined' && typeof $buynow.data('shoppy-location') !== 'undefined') {
      if($buynow.attr('disabled')) $buynow.removeAttr('disabled');
      else $buynow.attr('disabled', 'disabled');
    }
});

Upvotes: 0

Views: 64

Answers (2)

Sarbraj Dulai
Sarbraj Dulai

Reputation: 180

I would suggest a few changes for my method of validation to work. They are as follows:

HTML Changes: adding values to HTML options

<select class="form-control os" name="os">
  <option value="Please choose..." selected>Please choose...</option>
  <option value="Ubuntu Server 18.04">Ubuntu Server 18.04</option>
  <option value="Ubuntu Server 16.04">Ubuntu Server 16.04</option>
  <option value="Ubuntu Server 14.04">Ubuntu Server 14.04</option>
</select>

<select class="form-control location" name="location">
<option value="Please choose..." selected>Please choose...</option>  <option value="Sydney">Sydney</option>
  <option value="Tokyo">Tokyo</option>
  <option value="Sao Paulo">São Paulo</option>
</select>

<button class="btn btn-primary btn-lg float-right btn-buynow" data-shoppy-product="ewAfime" data-shoppy-os="" data-shoppy-location="" disabled>Buy now</button>

And the JS Validation is as follows: 

$(".os,.location").change(function() {
    if ($(".os").val() != "Please choose..." && $(".location").val() != "Please choose...") {
      $('.btn-buynow').prop("disabled", false);
    }
  });

Let me know if this works out for you.

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

Try following

  • While accessing data attributes using .data(), strip the data- from the argument
  • To disable a button, use .attr('disabled', 'disabled');

var $buynow = $('.btn-buynow');
if ($buynow.data('shoppy-os') && $buynow.data('shoppy-location')) {
  if($buynow.attr('disabled')) $buynow.removeAttr('disabled');
  else $buynow.attr('disabled', 'disabled');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn-buynow" data-shoppy-os="a" data-shoppy-location="b" disabled>Button</button>

Upvotes: 1

Related Questions