console.log does not work

Question

Probably an easy one. When I click on submit button in a form I have created I am supposed to see the message "clicked" on my console but it does not appear. Any ideas why this happens?

$("#button").on("click", function() {
  console.log("clicked");
  return false;
});

<div class="col-md-8">
  <form>
    <div class="form-group">
      <label for="name" class="sr-only">Name</label>
      <input type="text" class="form-control" id="name" placeholder="Your name here" maxlength="20">
    </div>
    <div class="form-group">
      <label for="email" class="sr-only">Email</label>
      <input type="email" class="form-control" id="email" placeholder="Your email here*" required="required">
    </div>
    <label for="textBox" class="sr-only">TextBox</label>
    <textarea class="form-control message-box" id="textBox" style="resize:none" cols="40" rows="5" placeholder="Your message here" minlength="20"></textarea>
    <button type="submit" class="btn btn-default" id="button">Submit</button>

  </form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

@aptbs85 Your code doesn't appear to be in a `$(document).ready();` call, and thus the click event wouldn't be bound on page load. — Daedalus, Mar 06 '16 at 00:05

score 0 · Answer 1 · answered Mar 05 '16 at 21:50

The $ function is defined only by jQuery. You need to include jQuery for this to work.

$("#button").on("click", function() {
  console.log("clicked");
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-8">
  <form>
    <div class="form-group">
      <label for="name" class="sr-only">Name</label>
      <input type="text" class="form-control" id="name" placeholder="Your name here" maxlength="20">
    </div>
    <div class="form-group">
      <label for="email" class="sr-only">Email</label>
      <input type="email" class="form-control" id="email" placeholder="Your email here*" required="required">
    </div>
    <label for="textBox" class="sr-only">TextBox</label>
    <textarea class="form-control message-box" id="textBox" style="resize:none" cols="40" rows="5" placeholder="Your message here" minlength="20"></textarea>
    <button type="submit" class="btn btn-default" id="button">Submit</button>

  </form>

Adding jQuery works here.

Thank you for your reply, jquery was already added at the bottom of my index.html but i just didnt copy it, i just included the html affected by the jq . Still doesnt work though — aptbs85, Mar 05 '16 at 22:03
@aptbs85 See the snippet. It works here. So the problem is not reproduce-able here, do you agree? — Praveen Kumar Purushothaman, Mar 07 '16 at 09:35

console.log does not work

1 Answers1