JavaScript not able to enable button due to condition

I have a pure JS below which is not working as it have to meet the conditions then the button would be enabled.

It’s able to work on jsfiddle but just not in codes. I remove the other condition to test what’s wrong. Am I missing something here?

JS:

<script type = "text/javascript">
var show = document.getElementById('show');
var button = document.getElementById('sub1');

var conditions = {
  cond3: false
};

function setCondition3(e) {
  conditions.cond3 = e.target.value && e.target.value.length > 0;
  enableButton(conditions);
}

function enableButton(options) {
  if (options.cond3) {
    button.removeAttribute('disabled');
  } else {
    button.setAttribute('disabled', true);
  }
}

show.addEventListener('change', setCondition3, false);
</script>

HTML:

<section id="placeOrder">
            <h2>Place order</h2>
            Your details
            Customer Type: <select id="show" name="customerType" onchange="change(this)">
                <option value="">Customer Type?</option>
                <option value="ret">Customer</option>
                <option value="trd">Trade</option>
            </select>

<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>

Answer

It’s able to work on jsfiddle but just not in codes

That almost always means you’re trying to access the element before it exists, because jsFiddle’s (mind-bogglingly surprising) default setting is to wrap all your JavaScript in a function it assigns to window.onload, which means it won’t run until very late in the page load process.

Put your script tags below the HTML that they refer to. Usually, unless you have a strong reason for doing something else, it’s best to put your scripts right at the end, just before the closing </body> tag.

Here’s your code, working, with the script after the HTML for the elements:

<section id="placeOrder">
  <h2>Place order</h2>
  Your details Customer Type:
  <select id="show" name="customerType">
    <option value="">Customer Type?</option>
    <option value="ret">Customer</option>
    <option value="trd">Trade</option>
  </select>

  <p>
    <input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
  </p>
</section>
<script>
var show = document.getElementById('show');
var button = document.getElementById('sub1');

var conditions = {
  cond3: false
};

function setCondition3(e) {
  conditions.cond3 = e.target.value && e.target.value.length > 0;
  enableButton(conditions);
}

function enableButton(options) {
  if (options.cond3) {
    button.removeAttribute('disabled');
  } else {
    button.setAttribute('disabled', true);
  }
}

show.addEventListener('change', setCondition3, false);
</script>

(I used an explicit script tag above for emphasis, but if I’d put the JavaScript in the right box in the Stack Snippet, it would also work, because Stack Snippets put the code after the HTML.)

Note that I also removed onchange="change(this)" from the <select> tag, since you’re using addEventListener. I also closed the <section> tag.