onclick event not working for multiple functions together

Question

onclick event

<button type="submit" value="submit" class="login100-form-btn" onClick="this.validate-input">
Create Account
</button>

and

<button type="submit" value="submit" class="login100-form-btn" onClick="this.disabled=true">
Create Account
</button>

works separately but

<button type="submit" value="submit" class="login100-form-btn" onClick="this.validate-input; this.disabled=true">
Create Account
</button>

does not work together. Please suggest me how can I

validate-input.
disable button once clicked. TOGETHER

EDIT

I have downloaded this code from colorlib.com. When I click the submit button two times together, it gives an error. So I want to disable the submit button once clicked.

Please checkout my jQuery

var input = $('.validate-input .input100');

$('.validate-form').on('submit', function() {
  var check = true;

  for (var i = 0; i < input.length; i++) {
    if (validate(input[i]) == false) {
      showValidate(input[i]);
      check = false;
    }
  }

  return check;
});


$('.validate-form .input100').each(function() {
  $(this).focus(function() {
    hideValidate(this);
  });
});

function validate(input) {
  if ($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
    if ($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
      return false;
    }
  } else {
    if ($(input).val().trim() == '') {
      return false;
    }
  }
}

function showValidate(input) {
  var thisAlert = $(input).parent();

  $(thisAlert).addClass('alert-validate');
}

function hideValidate(input) {
  var thisAlert = $(input).parent();

  $(thisAlert).removeClass('alert-validate');
}

You need () after a function name to call the function. But validate-input isn't an allowable function name. — Barmar
– Barmar, Commented Feb 4, 2021 at 13:13
- is the subtraction operator. this.validate-input is subtracting the value of input from this.validate. — Barmar
– Barmar, Commented Feb 4, 2021 at 13:14
disabling a submit button is going to cause problems if you are using a traditional form submission back to the server. — epascarello
– epascarello, Commented Feb 4, 2021 at 15:29

Barmar · Accepted Answer · 2021-02-04 16:42:16Z

0

You can add disabling the submit button to the validation function.

$('.validate-form').on('submit', function() {
  var check = true;

  for (var i = 0; i < input.length; i++) {
    if (validate(input[i]) == false) {
      showValidate(input[i]);
      check = false;
    }
  }
  if (check) {
    $(this).find(":submit").prop("disabled", true);
  }
  return check;
});

edited Feb 4, 2021 at 16:42

answered Feb 4, 2021 at 15:28

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pancham Jain Over a year ago

button does not get disabled :( clicking multiple times still leads to get multiple entries.

Barmar Over a year ago

Try now with different value for the attribute.

epascarello Over a year ago

setAttribute ?? Is that jQuery? it should be .prop()

Barmar Over a year ago

No, it should be .attr()

epascarello Over a year ago

Really? api.jquery.com/prop let's read what the documentation says "Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value."

Collectives™ on Stack Overflow

onclick event not working for multiple functions together

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related