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.

$(document).ready(function() {
  function validate() {
    var contactName = document.getElementById("contact-name").value;
    alert("Thank you " + contactName);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="name">NAME</label>
  <input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
  <label for="email">EMAIL</label>
  <input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
  <label for="email">MESSAGE</label>
  <textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
</form>

<button type="button" id="submit" onclick="validate();">SUBMIT MESSAGE</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);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="name">NAME</label>
  <input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
  <label for="email">EMAIL</label>
  <input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
  <label for="email">MESSAGE</label>
  <textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
</form>

<button type="button" id="submit">SUBMIT MESSAGE</button>

Here's a bit more on scope.

Answer 2

You should write the validate() function outside the $(document).ready as the onclick in binded when the DOM loads - while $(document).ready scopes the function.

This means the function is local to the closure and will not be visible globally if its written so inside $(document).ready.

See demo below:

function validate() {
  var contactName = document.getElementById("contact-name").value;
  alert("Thank you " + contactName);

}

<form>
  <label for="name">NAME</label>
  <input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
  <label for="email">EMAIL</label>
  <input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
  <label for="email">MESSAGE</label>
  <textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
</form>

<button type="button" id="submit" onclick="validate();">SUBMIT MESSAGE</button>

Answer 3

First, you should avoid inline handlers like that. Second, depending on the form submission process. You should have the button inside your <form> tags. Then add <form method="POST" action="/someurl/to/post/to">.

Otherwise, use jQuery and $.ajax() with a click event handler:

$('#submit').on('click', () {
  $.ajax({check properties in jquery api docs}, (result) => { 
      // do something 
    }, 
    (e) => { 
      // do something on error 
  })
})