title: Jquery Form Submit function not working
body: <p><strong>FOUND THE SOLUTION:</strong></p>
  
  <p>I had to encapsulate the function in another function. This is because it clashes with other Js libraries that i had on my html file.</p>
  
  <p>Cheers everyone!</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          ( function($) {
              // we can now rely on $ within the safety of our “bodyguard” function
              $(document).ready( function() { alert("nyah nyah! I’m able to use '$'!!!!");  
                              $("#keywordForm").submit(function(e) { alert('asshole');})});
          } ) ( jQuery ); 
  </code></pre>
  
  <p>Previous Question</p>
  
  <p>My submit button doesn't do anything even after i've bind the form to jquery.</p>
  
  <p>No alert messages are displayed meaning to say it did not even go into that function.</p>
  
  <p>I'm up in arms over this issue. :(</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          $(document).ready(function() { 
              $("form").submit(function(e) {
                  e.preventDefault()
                  alert("sometext"); 
                  return false;
                  updateKeywordSubscribed(e); 
              });
          });
          function updateKeywordSubscribed(e, keywords) {
              e.preventDefault();
              var option_form = jQuery(e.target);
              $.ajax({
                  url : option_form.attr('action'),
                  type : option_form.attr('method'),
                  data : option_form.serialize(),
                  dataType : 'json',
                  success : function(response) {
                          console.log(response)
                          var result = response.data
                          if(result == 'False')
                              { alert('Failed')}
                          alert('some text');
              error : function(xhr, ajaxOptions, thrownError) {
                          // log ajax errors
                      }
              });
          }
  
      &lt;!--function DoTheCheck() { {% for price in price_list %}
                      if($('input[type=checkbox]:checked').length == {{ price.no_of_keywords }}) 
                          { alert('Price to pay is $' + {{ price.price_of_each_keyword }} + '.0'); }
                  {% endfor %}
                  }--&gt;
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;!-- header --&gt;
          &lt;div id="header-wrap"&gt;
              &lt;div id="header"&gt;
                  &lt;a name="top"&gt;&lt;/a&gt;
                  &lt;h1 id="logo-text"&gt;&lt;a href="/" title=""style="padding-left:32px; top: 80px;"&gt;Rosebud&lt;/a&gt;&lt;/h1&gt;
                  &lt;p id="slogan"style="padding-left:32px;letter-spacing:0px;"&gt;
                      Your brand on the web...
                  &lt;/p&gt;
                  &lt;div  id="nav" style="padding-top: 15px;"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="/"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/topic/"&gt;Topic&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/opinion/"&gt;Opinion&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/statistics/"&gt;Statistics&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/realtime/"&gt;Realtime&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/"&gt;Support&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/about/"&gt;About&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li id="current"&gt;
                              &lt;a href="/profile/"&gt;My Profile&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  {% if user.is_authenticated %}
                  &lt;p id="auth" style="margin: 0px;"&gt;
                      &lt;a href="/"&gt;Welcome {{ user.username }} &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;/a&gt;
                      &lt;a href="/accounts/logout"&gt;Log Out&lt;/a&gt;
                  &lt;/p&gt;
                  {% else %}
                  &lt;p id="auth" style="margin: 0px;"&gt;
                      &lt;a href="/accounts/login/"&gt;Log In &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;/a&gt;
                      &lt;a href="/accounts/register/"&gt;Register&lt;/a&gt;
                  &lt;/p&gt;
                  {% endif %}
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- End of Header --&gt;
          &lt;div id="content-wrap"&gt;
              &lt;!-- content --&gt;
              &lt;div id="content-home"&gt;
                  &lt;br /&gt;
                  {% block content %} &lt;h2 style="margin: 0px; margin-bottom: 20px;"&gt;Profile Page&lt;/h2&gt;
                  {% if user.is_authenticated %}
                  &lt;p id="auth" style="margin: 0px;"&gt;
                      {% for userprofile in object_list %}
                      {% if userprofile.username = user.username %}
                      &lt;table style="margin: 0px; width: 600px; border: 0;"&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td style="width: 250px; border: 0;"&gt;&lt;label for="first_name"&gt;First Name:&lt;/label&gt;&lt;/td&gt;
                                  &lt;td style="border: 0;"&gt;{{ userprofile.first_name }}&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td style="border: 0;"&gt;&lt;label for="last_name"&gt;Last Name: &lt;/label&gt;&lt;/td&gt;
                                  &lt;td style="border: 0;"&gt;{{ userprofile.last_name }}&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td style="border: 0;"&gt;&lt;label for="email"&gt;Email: &lt;/label&gt;&lt;/td&gt;
                                  &lt;td style="border: 0;"&gt;{{ userprofile.email }}&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td style="border: 0;"&gt;&lt;label for="username"&gt;Username: &lt;/label&gt;&lt;/td&gt;
                                  &lt;td style="border: 0;"&gt;{{ userprofile.username }}&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td style="border: 0;"&gt;&lt;label for="keywords"&gt;Keywords currently subscribed to: &lt;/label&gt;&lt;/td&gt;
                                  &lt;td style="border: 0;"&gt;{{ userprofile.keywords_subscribed }}&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;input type="button" name = "submit" id="keywordBtn" value="Click to refresh list of keywords subscribed" action="/refresh_list/" /&gt;
                                  &lt;INPUT TYPE=hidden NAME="username" Value = {{ userprofile.username }} &gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                      &lt;br /&gt;
                       &lt;h3 style="margin: 0px; margin-bottom: 20px;"&gt;Click the checkboxes for more subscriptions&lt;/h3&gt;
                              &lt;table&gt;
                                  &lt;tbody&gt;
                                      {% for keyword in keyword_list %}
                                          {% if forloop.counter|divisibleby:"3" %}
                                                  &lt;tr&gt;
                                          {% endif %}
                                          &lt;td&gt;
                                              {% if keyword.keyword_name == userprofile.keywords_subscribed  %}
                                                  &lt;input type="checkbox" disabled="disabled" name="keywords" value="keywords"/&gt;
                                              {% else %}
                                                  &lt;input type="checkbox" name="cb" value="keywords"  /&gt;
                                              {% endif %}
                                              {{keyword.keyword_name}}
                                              &lt;/td&gt;
                                          {% if forloop.counter|add:"1"|divisibleby:"3" %}
                                                  &lt;/tr&gt;
                                          {% endif %}
                                      {% endfor %}
                                  &lt;/tbody&gt;
                              &lt;/table&gt;                    
                      &lt;br /&gt;
                      &lt;h3 style="margin: 0px; margin-bottom: 20px;"&gt;Price of subscriptions&lt;/h3&gt;
                      &lt;div id = "subscription"&gt;&lt;/div&gt;
                      &lt;input type="button" value="Amount to pay!" onclick="DoTheCheck()"&gt;
                      &lt;br /&gt;
                      &lt;/br&gt;
                      &lt;form id="keywordForm" method="post"&gt; &lt;!--action="/keyword_subscribe/"--&gt; 
                      &lt;P&gt;Keyword: &lt;INPUT TYPE="TEXT" NAME="keyword_input" Value = "Enter a new Keyword" class = 'hint'&gt;&lt;BR&gt;&lt;BR&gt;
                      &lt;!--&lt;INPUT TYPE=hidden NAME="name_input" Value = {{ userprofile.username }} &gt;--&gt;
                      &lt;INPUT TYPE="submit" Value="Crawl" name="crawl"&gt;
                      &lt;/P&gt;
                      &lt;/form&gt;
  </code></pre>
  
  <p>And here's the Jquery part:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function() { 
              $("#keywordForm").submit(function(e) {
                  alert("sometext"); 
                  return false;
              });
          });
  &lt;/script&gt;
  </code></pre>