Disable Submit Button on Form Submit

Disable submit button on form submit

Do it onSubmit():

$('form#id').submit(function(){
    $(this).find(':input[type=submit]').prop('disabled', true);
});

What is happening is you're disabling the button altogether before it actually triggers the submit event.

You should probably also think about naming your elements with IDs or CLASSes, so you don't select all inputs of submit type on the page.

Demonstration: http://jsfiddle.net/userdude/2hgnZ/

(Note, I use preventDefault() and return false so the form doesn't actual submit in the example; leave this off in your use.)

Disable submit button if form not filled out

One problem in your code ist that, you have declared a sendText function three times also you never call this function,I don't know you put all your html code in your question or not but your markup seems have some problems but since your question is realted to change the disable status of submit button, we ignore issues related to the markup. I copied your code in the below snippet and make some changes to implement the feature you wanted to have. Please checkout this snippet.

const submitBtn = document.getElementById('submit');
const firstName = document.getElementById('first-name')
const email = document.getElementById('email')
const comment = document.getElementById('comment')

function updateSubmitBtn(){
  const firstNameValue = firstName.value.trim();
  const emailValue = email.value.trim();
  const commentValue = comment.value.trim();
  debugger;
  if(firstNameValue && emailValue && commentValue){
    submitBtn.removeAttribute('disabled');
  }else {
    submitBtn.setAttribute('disabled', 'disabled');
  }
}

firstName.addEventListener('change', updateSubmitBtn);
email.addEventListener('change', updateSubmitBtn);
comment.addEventListener('change', updateSubmitBtn);

<tr>
  <fieldset div="contact">
    <td>First Name* <input type="text" id="first-name" name="first-name" placeholder="Your name" required></td>
    <td>Last Name<input type="text" id="last-name" name="last-name" placeholder="Your last name"></td>
    <td>Email*<input type="email" id="email" name="email" placeholder="Your email" required>
    </td>
  </fieldset>
  <fieldset>
    <label for="comment">Add your comment*</label><textarea id="comment" name="comment" placeholder="Your comment..." required></textarea>
</tr>
<lable for="hour">Which one is the best hour to contact you?</lable>
<select id="hour">
  <option selected>Select an Option</option>
  <option value="8">08:00 AM</option>
  <option value="9">09:00 AM</option>
  <option value="10">10:00 AM</option>
    <option value="11">11:00 AM</option>
    <option value="12">12:00 AM</option>
    <option value="13">13:00 PM</option>
    <option value="14">14:00 PM</option>
    <option value="15">15:00 PM</option>
    <option value="16">16:00 PM</option>
    <option value="17">17:00 PM</option>
    <option value="18">18:00 PM</option>
    <option value="19">19:00 PM</option>
</select>

</fieldset>
<button disabled id="submit">Submit</button>

How to disable submit button until all mandatory fields are filled using html and vanilla js

Set up a validation object with booleans to record if all your values have met validation.

Then I'd loop through all your inputs and add an event listener to each of them. In this example I've checked to see if each has at least one character in them, but you might want to expand on this.

Finally, loop through your validation object and check if all the values are true. If they are, remove the disabled attribute from the button.

let inputs = document.querySelectorAll('input');
let buttonSend = document.getElementById('button-send');

let inputValidator = {
  "username": false,
  "email": false,
  "password": false
}

inputs.forEach((input) => {
  input.addEventListener('input', () => {
    let name = event.target.getAttribute('name');
    if (event.target.value.length > 0) {
      inputValidator[name] = true;
    } else {
      inputValidator[name] = false;
    };

    let allTrue = Object.keys(inputValidator).every((item) => {
      return inputValidator[item] === true
    });

    if (allTrue) {
      buttonSend.disabled = false;
    } else {
      buttonSend.disabled = true;
    }
  })
})

<form action='index.html' id="form-user">
  <input type="text" name="username" id="username" placeholder="username">
  <input type="email" name="email" id="email" placeholder="email">
  <input type="password" name="password" id="password" placeholder="password">
  <button type="submit" name="submit" id='button-send' disabled>SUBMIT</button>
</form>

How to disable submit button after click

You can use

document.getElementById('button').disabled="true";

Disable submit button when form submit

Just add:

$(this).prop("disabled", true);

Full Code:

$(".submitStandard").on('click', function() {
  $(this).prop("disabled", true);
  $('form').validate({
    ignore: [],
    rules: {
      required: {
        required: true
      },
      shopname: {
        required: true
      }
    },
    highlight: function(element) {
      $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
      $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
      if(element.parent('.input-group').length) {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element); 
      }
    }
  });
});

Or on submit event of the <form>:

$('form').submit(function(){
    $(this).find(".submitStandard").prop('disabled', true);
});

Note: I can see that you are using a generic $("form"). This is not recommended since when the JavaScript loads, it blindly applies for all the <form> elements. So it is better to give an id.

disabling button on click stop form from submitting

Click event occurs before form submit and disabled button prevents submission. This is workaround:

<script>
  $('.button').on('click', function(event) {
    $this=$(this);
    setTimeout(function(){$this.prop('disabled', true);},50);
  });
</script>

Another workaround is to process $('form').on('submit',function(){...});

Edit: ...INSTEAD.

---

Related Topics