"function" not defined error in Javascript: what is the correct way to call my function?

Question

I understand a little because of this post: JQuery, setTimeout does not work , why it does not work, but it all saves that this is the correct way to call _finalvalidate() inside my div?

  <script type="text/javascript"> $(document).ready(function(){ //On Submitting function _finalvalidate(){ alert('ppp'); if(validateName() & validateEmail() & validatePhone()){ alert('OK'); return true } else{ alert('false'); return false; } } }); </script> <div onclick="_finalvalidate();"> Take action </div> 

Answer 1

JQuery's way of doing this would be something like this:

 <script type="text/javascript"> $(document).ready(function(){ //When clicking on the div, execute this $("#validation").click(function() { alert('ppp'); if(validateName() & validateEmail() & validatePhone()){ alert('OK'); return true } else{ alert('false'); return false; } }); }); </script> .... <div id="validate"> Take action </div> 

If you really want to use the javascript function style, you will need to place the function outside the document.ready() function, and then you can call it using the onclick attribute:

 <script type="text/javascript"> function _finalvalidate(){ alert('ppp'); if(validateName() & validateEmail() & validatePhone()){ alert('OK'); return true; } else{ alert('false'); return false; } } </script> .... <div onclick="_finalvalidate();"> Take action </div> 

In this case, you no longer have jQuery.

Answer 2

You must bind events to jQuery events if you are using jQuery. But as far as it does not work, here is some information about the rules for defining JS.

---

Any function that you declare later should NOT be in the jquery document callback. You cannot get it because it is hidden inside a function that provides it with its own personal area from which you cannot get from outside.

 var f = function() { var inner = function() {}; }; inner(); // out of scope 

You can export it to a global object, making it accessible everywhere.

 var f = function() { window.inner = function() {}; }; inner(); // works! 

but the best way is to simply declare it in a global area first.

 var f = function() {}; // Now this function has no purpose anymore at all! var inner = function() {}; inner(); // works 

Answer 3

Your function does not exist in the window area where you are trying to call it. I would change your code to:

 <div id="action">Take Action</div> 

And then your JavaScript will look like this:

 <script type="text/javascript"> $(document).ready(function(){ //On Submitting $('#action').click(function() { alert('ppp'); if(validateName() & validateEmail() & validatePhone()){ alert('OK'); return true } else { alert('false'); return false; } }); </script> 

Answer 4

If you want your method to be called from the onclick div attribute, you need to make it available in the global scope. Below are some options. However, I must point out that Option 1 is generally not approved these days, and Option 2 is just plain stupid. The recommended approach to such things is to unobtrusively hook up event handlers, as in Corey's answer.

Option 1

 <script type="text/javascript"> function _finalvalidate(){ alert('ppp'); if(validateName() & validateEmail() & validatePhone()){ alert('OK'); return true } else{ alert('false'); return false; } } </script> <div onclick="_finalvalidate();"> Take action </div> 

Option 2

 <script type="text/javascript"> var _finalvalidate; $(document).ready(function() { _finalvalidate = function(){ alert('ppp'); if(validateName() & validateEmail() & validatePhone()){ alert('OK'); return true } else{ alert('false'); return false; } }; }); </script> <div onclick="_finalvalidate();"> Take action </div> 

Answer 5

To save it in jQuery, I would give your div an id tag and call it using the jQuery onclick event. Are you also sure that you want to perform bitwise operations & in your if, or logical and && ?

 <script type="text/javascript"> $(document).ready(function() { $('#callme').click(function() { alert('ppp'); if(validateName() && validateEmail() && validatePhone()){ alert('OK'); return true; } else { alert('false'); return false; } } }); </script> <div id="callme"></div> 

Answer 6

The problem with your code is that your function is not defined in the global context, but rather is defined inside the document.ready callback function. Thus, when the browser receives onclick and evaluates your string, it does not find this function name in the global context. You can fix this in several ways:

1) Change your function to be defined in the global scope, for example:

 //On Submitting window._finalvalidate = function(){ 

2) Move the _finalvalidate() function outside of document.ready() so that it is in the global scope. There is no reason for it to be in document.ready() , because it is not executed immediately.

3) Go to the "jQuery" method to specify event handlers instead of putting onclick = xxx in your HTML, as Corey shows in his answer.