onclick for button not calling function

Question

One of the problems I am experiencing at the moment is not being able to call a function in the onclick event of the submit button.

Answer 1

As others have mentioned, the issue here is the scope that the validate() function is defined in.

JavaScript is "lexically scoped", meaning that the location of a declaration determines from where it can be reached by other code.

Your validate function is declared (scoped to) inside the anonymous document.ready function. This means that the only place where validate can be "seen" is by other code that shares that scope. The onclick=validate() line is outside of that scope and that is why your function isn't being called.

However, instead of moving the validate() function outside of the document.ready() callback (thus making it global, which is a bad thing), you really should remove the onclick inline HTML event attribute as this is a bad practice (see this for several reasons why) and do the event binding in the script area. This approach will allow you to set up the event in the same scope as the validate() function and keep the HTML clean:

$(document).ready(function() {
  // Do your event binding in JavaScript, not as inline HTML event attributes:
  $("#submit").on("click", validate);

  // Now the event handler reference and the function are in the same scope
  function validate() {
    var contactName = document.getElementById("contact-name").value;
    alert("Thank you " + contactName);
  }
});

  NAME
  
  EMAIL
  
  MESSAGE
  


SUBMIT MESSAGE

Here's a bit more on scope.