Disable Form Auto Submit on Button Click

Disable form auto submit on button click

Buttons like <button>Click to do something</button> are submit buttons.

Set type="button" to change that. type="submit" is the default (as specified by the HTML spec):

The missing value default and invalid value default are the Submit Button state.

How to disable auto submit behavior when hitting enter key?

This function should do the trick:

function submitOnEnter(e, page) {
    var key;

    if (window.event)
        key = window.event.keyCode; //IE
    else
        key = e.which; //Firefox & others

    if(key == 13)
        window.location = page;
}

You should call it like this:

<input id="Text2"  type="text"  onkeyup="submitOnEnter(event, 'p2.html')" /> 

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.)

Disabling form auto submit

The <input type="image"> is a graphical submit button, so when you click it, it will automatically submit the form. Here's the documentation on it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/image. If you want to stop the form from submitting, you need to cancel the default action of the click. So, your code would be this:

$("input[type='image']").click(function(e) {
        e.preventDefault();
        $("input[id='avatar']").click();
});

Prevent users from submitting a form by hitting Enter

You can use a method such as

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

In reading the comments on the original post, to make it more usable and allow people to press Enter if they have completed all the fields:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

How to disable submit the form when click a another button that belongs to the form

You just need to add the onsubmit HTML attribute to your form's HTML and call the event.preventDefault function.
Like this:

<form onsubmit="event.preventDefault()" action="payment.php" method="post">
    <div class="qty__amount">
      <button class="qty__button" id="minus1" type="button"><i class="uil uil-minus-square-full"></i></button>
      <input autocomplete="off" class="qtyamount1 ro_form-qty" type="text" id="qtyamount1" name="qty1" value="0" readonly>
      <button class="qty__button" id="plus1" type="button"><i class="uil uil-plus-square"></i></button>
    </div>

    <div class="button">
      <button class="checkout__button" type="submit">Checkout</button>
    </div>
</form>

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>