title: Flask and jQuery '$' is not defined
body: <p>I am brand new to programming and I am having trouble interpreting this console error that keeps appearing when I try to create a login page. I have basic login page with email and password inputs and a flask route that displays login page and display input. I have followed a tutorial online to get this working, but I when looking at the console I get the following error: <code>test.js:1 Uncaught ReferenceError: $ is not defined at test.js:1</code> According to the tutorial this should work. My routes for login and login_submit looks like this</p>
  <pre><code>@app.route(&quot;/login&quot;)
  def show_login():
      return render_template(&quot;login.html&quot;)      
  
  @app.route('/login_submit', methods=['POST'])
  def login_submit():
      &quot;&quot;&quot;Log a user into the website&quot;&quot;&quot;
  
      email = request.form.get('email')
      password = request.form.get('password')
  
      user = check_user_login_info(email, password)
      print(user)
      
      if (len(user) &gt; 0):
          name = user[0].first_name + ' ' + user[0].last_name
          session['user_id'] = user[0].user_id
          session['cart'] = {}
          return jsonify({'login': name})
      
      return jsonify({'invalid': 'Incorrect email or password'}) 
  </code></pre>
  <p>And the javascript looks like such</p>
  <pre><code>$(document).ready(function() {
  
      $('form').on('submit', function(event) {
  
          $.ajax({
              data : {
                  name : $('#nameInput').val(),
                  email : $('#emailInput').val()
              },
              type : 'POST',
              url : '/login_submit'
          })
          .done(function(data) {
  
              if (data.error) {
                  $('#errorAlert').text(data.login).show();
                  $('#successAlert').hide();
              }
              else {
                  $('#successAlert').text(data.invalid).show();
                  $('#errorAlert').hide();
              }
  
          });
  
          event.preventDefault();
  
      });
  
  });
  </code></pre>
  <p>In my HTML if I add to my form <code>action='/login_submit' method='POST'</code> I get the output of jsonify saying login was successful or invalid
  The html is very basic and looks like this</p>
  <pre><code>&lt;script src=&quot;/static/test.js&quot;&gt;&lt;/script&gt; 
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;h2&gt;Log Into Your Account&lt;/h2&gt;
    &lt;form &gt;
      &lt;p&gt;
        Email &lt;input type=&quot;text&quot; id='emailInput' name=&quot;email&quot;&gt;
      &lt;/p&gt;
  
      &lt;p&gt;
        Password &lt;input type=&quot;password&quot; id='passwordInput' name=&quot;password&quot;&gt;
      &lt;/p&gt;
  
      &lt;p&gt;
        &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
      &lt;/p&gt;
    &lt;/form&gt;
      &lt;div id=&quot;successAlert&quot; role=&quot;alert&quot; style=&quot;display:none;&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;errorAlert&quot; role=&quot;alert&quot; style=&quot;display:none;&quot;&gt;&lt;/div&gt;
  </code></pre>