The submit button is not getting enabled even after every field is filled

Question

I don't know what's wrong with the bootstrap inline validation files... Even after entering all the values, the submit button is not getting enabled.

$('#registerbutton').attr('disabled', 'disabled');

function updateFormEnabled() {
  if (verifyAdSettings()) {
    $('#registerbutton').attr('disabled', '');
  } else {
    $('#registerbutton').attr('disabled', 'disabled');
  }
}

function verifyAdSettings() {
  if ($('#b2b_service_type').val() != '') {
    return true;
  } else {
    return false
  }
}

$('#b2b_service_type').change(updateFormEnabled);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" role="form" id="bookform" data-toggle="validator" enctype="multipart/form-data">
  <div class="form-group col-md-6 col-xs-6 has-feedback" style="padding:5px">
    <input id="b2b_customer_name" name="b2b_customer_name" class="form-control input-lg headerform" type="text" required placeholder="Your Name *" pattern="^[_A-z\s]{3,}$" data-error="Please enter atleast 3 alphabets">
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group col-md-6 col-xs-6 has-feedback" style="padding:5px">
    <input id="b2b_cust_phone" name="b2b_cust_phone" type="tel" class="form-control input-lg headerform" type="tel" maxlength="10" placeholder="Mobile Number. *" pattern="^[789]\d{9}$" data-error="Please enter a valid mobile number" required>
    <p class="help-block with-errors"></p>
  </div>
  <div class="form-group col-md-6 col-xs-6 has-feedback" style="padding:5px">
    <select id="b2b_service_type" name="b2b_service_type" class="form-control input-lg headerform status" required>
      <option value="" disabled="" selected="" hidden="">Service Type</option>
      <option value="22">something</option>
      <option value="34">Another</option>
    </select>
    <p class="help-block with-errors"></p>
  </div>
  <button id="registerbutton" type="submit" class="btn btn-xl submit" disabled>Submit</button>
  </div>
  <!-- Book div -->

Please include *all* relevant code in the question. At the moment your question is completely unanswerable as you didn't add the fiddle link at all. — Rory McCrossan, Jun 03 '16 at 10:29
Please read this: http://stackoverflow.com/help/mcve Half of the code provided is not relevant to the question (the text boxes) and the mention of bootstrap. — freedomn-m, Jun 03 '16 at 10:47
Possible duplicate of [jQuery disable/enable submit button](http://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button) — forgivenson, Jun 03 '16 at 10:53

score 0 · Answer 1 · answered Jun 03 '16 at 10:51

From the fiddle / code provided, it appears you are trying to:

enable the submit button when the combo changes

The fiddle doesn't work as you've not included jquery in the javascript options and the one you've included (via script src) is not being loaded as it's not https (always check the browser console window - it shows an http error and '$ is not defined'.

Fixing the jquery link (either of the two) still doesn't let it work, because you've used attr

Change this to prop

$('#registerbutton').prop('disabled', 'disabled');

function updateFormEnabled() {
    if (verifyAdSettings()) {
        $('#registerbutton').prop('disabled', '');
    } else {
        $('#registerbutton').prop('disabled', 'disabled');
    }
}

Updated fiddle: https://jsfiddle.net/xrxjoaqe/4/

Sathish Prabhakaran · Accepted Answer · 2016-06-03T11:17:39.193

Please be sure & finish all your edits before posting a question. Try this out. This will help you!

<button id="registerbutton" type="submit" class="btn btn-xl submit" disabled="disabled">Submit</button>

Use removeAttr

function updateFormEnabled() {
          if (verifyAdSettings()) {
            $('#registerbutton').removeAttr('disabled');
          } else {
            $('#registerbutton').attr('disabled', 'disabled');
          }
        }

The submit button is not getting enabled even after every field is filled

2 Answers2