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

Question

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');
    }
});

And why should it? You're not logging anything to the console. — Jack Bashford
– Jack Bashford, Commented May 8, 2019 at 10:19
Sorry, I'm quite unfamiliar with jquery/javascript, I've tried to log to the console with console.log(); but its not printing anything — tweetok
– tweetok, Commented May 8, 2019 at 10:25
Should you instead be checking if the data attribute exists? What you are doing only returns true if the data attribute is not an empty string, or if the value is 0 or false. To check for the actual existence of the data attribute you should use typeof($buynow).data(“data-shoppy-os”) !== “undefined” — Cybernetic
– Cybernetic, Commented May 8, 2019 at 10:36
Please post your (relevant, minimal reproducible example) HTML in your question as well in order that we can see what you're doing, and his to reproduce the problem. Linking to a JS Fiddle is a useful extra, but your Friday coffee must be in your question. — David Thomas
– David Thomas, Commented May 8, 2019 at 10:48

Nikhil Aggarwal · Accepted Answer · 2019-05-08 10:26:59Z

1

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>

answered May 8, 2019 at 10:26

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

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

8 Comments

tweetok Over a year ago

Thanks for your answer. This isnt working for me though. I'm getting the data value from two different dropdown menus, should I add it into the change event?

Nikhil Aggarwal Over a year ago

Can you please share your code snippet for better understanding of the problem? Additionally, if you are changing values and based on that you want the button to be enabled/disabled then you need to have change event

tweetok Over a year ago

This isnt working correctly. When I choose from the first dropdown the button already gets enabled.

Nikhil Aggarwal Over a year ago

What is the desired behavior?

tweetok Over a year ago

It should be enabled when both data-attributes have values.

|

Sarbraj Dulai · Accepted Answer · 2019-05-08 11:29:09Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related