Jquery Onclick Function Not Defined

I have an ajax script and I am trying to post from a function. I am using a onlick href but its not coming up as undefined. This is using wordpress. I have tried to move the code a

Solution 1:

When you do javascript:submitComment() that's calling a the global function submitComment. Since the submitComment is defined in the jQuery(function($) { ... }) function, it is not a global. Therefore, window.submitComment is undefined (hence undefined is not a function).

The globals are stored in the window object.

Therefore, you can expose that submitComment as a global:

window.submitComment = function () {...}

Note that you should avoid using globals as much as possible. In this case you can do that by adding:

$("#submit").click(submitComment);
// In this case, you shouldn't declare submitComment as a global anymore

And since you are in a form, you want to stop the default browser behavior when clicking the a element, by using return false at the end of the function.

Solution 2:

Alternatively to @Ionică Bizău's solution.

You could use onclick="submitComment()" instead of href.

<a onclick="submitComment()"type="submit"id="submit" name="submit" class="btn cardh-bg text-white text-bold margin-top-5"> Submit Comment </a>

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divid="live"><divclass="container">
    <?php the_content(); ?>
    <divid="comment-display"><formmethod="post"action="index.php"id="comments_submit"><inputtype="hidden"id="nameBox"value="<?php echo $_SESSION['name'] ?>"name="name" /><inputtype="hidden"id="emailBox"name="email"value="<?php echo $_SESSION['email']; ?>" /><textareaid="chatBox"placeholder="Ask a question or make a comment"name="comment"class="form-control"></textarea><aonclick="submitComment()"type="submit"id="submit"name="submit"class="btn cardh-bg text-white text-bold margin-top-5"> Submit Comment </a></form><br /><divid="displayComments"></div></div></div></div><scripttype="text/javascript">jQuery(function($) {
    setInterval(function() {
      $.ajax({
        method: "GET",
        url: "<?php echo get_template_directory_uri()?>/get_chat.php"
      }).done(function(html) {
        $('#displayComments').html(html);
      });
    }, 2000);

    window.submitComment = function(){
      console.log('submitComment called!');
      $.ajax({
        method: "POST",
        url: "template-live.php",
        data: {
          submitComment: $('#chatBox').val(),
          submitName: $('#nameBox').val(),
          submitEmail: $('#emailBox').val()
        }
      }).done(function(html) {
        alert('Your comment has been submitted, and will be displayed after approval.');
        $('#chatBox').val('');
      });
    }
  });
</script>