Jquery Disable/Enable Submit Button

jQuery disable/enable submit button

The problem is that the change event fires only when focus is moved away from the input (e.g. someone clicks off the input or tabs out of it). Try using keyup instead:

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

disable submit button using jquery

Have an id or a name for the submit button. Disable that button only

For example:

HTML

<form id="frm_name">
     <input type="submit" id="btn_submit" value="Submit" />
</form>

jQuery

...
if (formId != ''){
    $('#btn_submit').attr('disabled',true);
    this.submit();
}
...

Enable/Disable Submit Button using jQuery (and bootstrap)

The input and change events will bubble. Meaning that a parent element surrounding both inputs can capture these events. I don't know what you mean with a few fields that unfortunately didn't fit within the tag, for this example I still used one.

The example below here will listen for the input event on the form element. Whenever one of the inputs have their values changed it will check if all fields have valid (in this case; not empty) values.

When either field has an input that is empty it will set the areFieldsValid boolean to false, meaning the field is not valid. This value is then used to either set or remove the disabled attribute from the button in the form.

Edit

With the right selector, you can specify which inputs to check on which to leave out.

const $form = $('.form');
const $inputs = $form.find('input.validate');
const $button = $form.find('button');

$form.on('input', '.validate', function(event) {
  let areFieldsValid = true;
    
  $.each($inputs, function() {
    const $input = $(this);
    if ($input.val() === '') {
      areFieldsValid = false;
    }
  });
  
  $button.prop('disabled', !areFieldsValid);
});

.form {
  display: flex;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form">
  <label for="first-name">First name (validate)</label>
  <input id="first-name" class="validate" type="text" name="first_name">
  <label for="last-name">Last name</label>
  <input id="last-name" type="text" name="last_name">
  <label for="address">Address</label>
  <input id="address" type="text" name="address">
  <label for="country">Country (validate)</label>
  <input id="country" class="validate" type="text" name="country">
  <button type="submit" disabled>Submit</button>
</form>

Disable/Enable submit button not working on mobile classes

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

html jquery disable button on value

$('#submitBtn').prop('disabled', true);

Disable and enable submit button in jQuery if else condition

You can call stopSubmit on keyUp and keep checking in all input changes and are fully validated.

Hopefully - This will not cause the screen freeze as it will be validating instantly. I have tested this it works.

Run Snippet below to see it working.

function isValidFullname(input) {
  var fullnameregex = /^([a-zA-Z\-_ ’'‘ÆÐƎƏƐƔĲŊŒẞÞǷȜæðǝəɛɣĳŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊĲĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịĳĵķƙĸĺļłľŀŉńn̈ňñņŋóòôöǒŏōõőọøǿơœŔŘŖŚŜŠŞȘṢẞŤŢṬŦÞÚÙÛÜǓŬŪŨŰŮŲỤƯẂẀŴẄǷÝỲŶŸȲỸƳŹŻŽẒŕřŗſśŝšşșṣßťţṭŧþúùûüǔŭūũűůųụưẃẁŵẅƿýỳŷÿȳỹƴźżžẓ]+)$/;

  if (fullnameregex.test(input)) {
    return true;
  } else {
    return false;
  }
}

function isValidUsername(input) {
  var usernameregex = /^[a-z0-9_-]{3,16}$/;

  if (usernameregex.test(input)) {
    return true;
  } else {
    return false;
  }

}

function isValidEmail(input) {
  var emailregex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

  if (emailregex.test(input)) {
    return true;
  } else {
    return false;
  }

}

function isValidPassword(input) {
  var passwordregex = /^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/;

  if (passwordregex.test(input)) {
    return true;
  } else {
    return false;
  }

}

function StopSubmit() {

  var fullname = $("#fullname").val();
  var username = $("#username").val();
  var email = $("#email").val();
  var password = $('#password').val();

  if (fullname == "" || username == "" || email == "" || password == "" || !isValidFullname(fullname) || !isValidUsername(username) || !isValidEmail(email) || !isValidPassword(password)) {
    //Disable submit button
    $('#submit').prop('disabled', true)
  } else {
    //Enable submit button
    $('#submit').prop('disabled', false)
    console.log('Ready to Submit')
  }
}

//Input validations
$('.validate-inputs').keyup(function(event) {

  //Call one only
  StopSubmit();

  event.preventDefault();

  if ($(this).attr('id') == 'fullname') {
    if ($(this).val() == "") {
      $("#vfullname").html("Please enter a name.");
    } else if (!isValidFullname($(this).val())) {
      $("#vfullname").html("Please enter a valid name.");
    } else {
      $("#vfullname").html("");
    }
  } else if ($(this).attr('id') == 'username') {
    if ($(this).val() == "") {
      $("#vusername").html("Please enter a username.");
    } else if (!isValidUsername($(this).val())) {
      $("#vusername").html("Please enter a valid username.");
    } else {
      $("#vusername").html("");
    }
  } else if ($(this).attr('id') == 'email') {
    if ($(this).val() == "") {
      $("#vemail").html("Please enter an email.");
    } else if (!isValidEmail($(this).val())) {
      $("#vemail").html("Please enter a valid email");
    } else {
      $("#vemail").html("");
    }
  } else if ($(this).attr('id') == 'password') {
    if ($(this).val() == "") {
      $("#vpassword").html("Please enter a password.");
    } else if (!isValidPassword($(this).val())) {
      $("#vpassword").html("The password must contain at least one upper and lower case character, a number and a special character.");
    } else {
      $("#vpassword").html("");
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="register-form" role="form" method="post" autocomplete="off">

  <input type="text" name="fullname" id="fullname" class="validate-inputs" placeholder="Fullname">
  <span id="vfullname"></span><br>

  <input type="text" name="username" id="username" class="validate-inputs" placeholder="Username">
  <span id="vusername"></span><br>

  <input type="email" name="email" id="email" class="validate-inputs" placeholder="Email">
  <span id="vemail"></span><br>

  <input type="password" name="password" id="password" class="validate-inputs" placeholder="Password">
  <span id="vpassword"></span><br>

  <input id="submit" type="submit" name="submit" value="Create" disabled>

</form>

Disable and Enable submit button in jquery

Use .prop() method and use the $(this) to reference the target element within the callback function

jQuery(function($) {
  const $register = $("#register"),        $loading = $("#loading");
  $register.on("click", function() {      $(this).prop('disabled', true);    $loading.show();        setTimeout(function() {      $register.prop('disabled', false);      $loading.hide();    }, 2000);
  });
});

<input id="register" value="Register" type="submit"><div id="loading" style="display:none;">Wait 2 sec...</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

Jquery Disable/Enable Submit Button