jquery onclick function not defined

Question

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 around inside and outside the scope but I still cant seem to get it to work.

    <div id="live">
    <div class="container">
        <?php the_content(); ?>
        <div id="comment-display">
            <form method="post" action="index.php" id="comments_submit">
                <input type="hidden" id="nameBox" value="<?php echo $_SESSION['name'] ?>" name="name"/>
                <input type="hidden" id="emailBox" name="email" value="<?php echo $_SESSION['email']; ?>"/>
                <textarea id="chatBox" placeholder="Ask a question or make a comment" name="comment" class="form-control"></textarea>
                <a href="javascript:submitComment();" type="submit" id="submit" name="submit" class="btn cardh-bg text-white text-bold margin-top-5"> Submit Comment </a>
            </form>
            <br />
            <div id="displayComments"></div>
        </div>
    </div>
</div>
<script type="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);

        function submitComment(){
            $.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>

Thank you :)

Answer 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.

Answer 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>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="live">
  <div class="container">
    <?php the_content(); ?>
    <div id="comment-display">
      <form method="post" action="index.php" id="comments_submit">
        <input type="hidden" id="nameBox" value="<?php echo $_SESSION['name'] ?>" name="name" />
        <input type="hidden" id="emailBox" name="email" value="<?php echo $_SESSION['email']; ?>" />
        <textarea id="chatBox" placeholder="Ask a question or make a comment" name="comment" class="form-control"></textarea>
        <a onclick="submitComment()" type="submit" id="submit" name="submit" class="btn cardh-bg text-white text-bold margin-top-5"> Submit Comment </a>
      </form>
      <br />
      <div id="displayComments"></div>
    </div>
  </div>
</div>
<script type="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>