title: jQuery won't finish submitting properly and does unexpected things upon submitting
body: <p>I am making a website that recommends subreddits for you by using the 'Reddit API'. </p>
  
  <p>The project is <a href="http://jsfiddle.net/fw8jr4n8/5/" rel="nofollow">here</a>. The site is best viewed in a maximised browser window at the moment because I'm not finished with the front-end. </p>
  
  <p>It works by getting the inputted subreddits from the form and putting them in an array (using <code>.serializeArray()</code>). I also use the same function to get the omitted subreddits from the second form, too. It then gets the values and puts them together in a string. The final result (in the api variable) should be something like </p>
  
  <p><a href="http://www.reddit.com/api/recommend/sr/AskReddit,CasualConversation,?omit=SkypePals," rel="nofollow">http://www.reddit.com/api/recommend/sr/AskReddit,CasualConversation,?omit=SkypePals,</a></p>
  
  <p>with the result:  </p>
  
  <pre><code>[{"sr_name": "ForeverAloneWomen"}, {"sr_name": "southpaws"}, {"sr_name": "deaf"}, {"sr_name": "PointlessStories"}, {"sr_name": "intrusivethoughts"}, {"sr_name": "AMADisasters"}, {"sr_name": "Frat"}, {"sr_name": "GamerPals"}, {"sr_name": "Solving_A858"}, {"sr_name": "FindTheSniper"}]
  </code></pre>
  
  <p>depending on the inputted subreddits.
  After this, it simply uses the api variable as a parameter for the <code>getJSON()</code> function, which returns the JSON response from Reddit into the json variable. </p>
  
  <p>Then I use <code>each()</code> to iterate over the JSON response so that the recommended subreddits are put into the right column (beneath recommendations).</p>
  
  <p>I've spent a very long time (several days) trying to fix this and it still doesn't work. When clicking the submit button, it refreshes the page and adds parameters into the address bar with the input of the form inputs. I don't know why this is.</p>
  
  <p>Any help to fix this and avoid this in the future would be greatly appreciated. I can't get my head around this. I can't find anything that helps through searching either. I don't exactly know what the name of this issue is.</p>
  
  <p>Apparently I am required to also provide code in this post as I linked to jsFiddle. I think my Javascript is most relevant so I'll provide that:</p>
  
  <pre><code>$(document).ready(function () {
      var api = "http://www.reddit.com/api/recommend/sr/";
      var json;
      var redditBaseLink = "http://www.reddit.com/r/";
      var srLink;
      var srArray;
      var srString = '';
      var omitArray, omitString;
  
      $(".srInputForm").submit(function (event) {
          srArray = $(this).serializeArray();
          $.each(srArray, function (i, field) {
              srString += field.value + ",";
          });
          api = api.concat(srString, "?omit=");
  
          $.each(omitArray, function (i, field) {
              omitString += field.value + ",";
          });
          api = api.concat(omitString);
  
          json = $.getJSON(api, function () {
              $.each(json, function (i, response) {
                  srLink = "";
                  srLink = '&lt;div class="recommendation"&gt;' + '&lt;a href="' + redditBaseLink + response.sr_name + '/" target="_blank"&gt;' + response.sr_name + '&lt;/a&gt;&lt;/div&gt;';
  
                  $(srLink).hide().appendTo(".recommendationsCol").fadeIn('slow');
              });
          });
  
          event.preventDefault;
          event.unbind;
      });
  });
  </code></pre>
  
  <p>Thanks</p>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>I have changed the code so that the <code>event.preventDefault;</code> function towards the bottom of the script is at the top of the <code>submit();</code> event handler. This seems to have worked, but now the script stops at another place, right after the <code>api = api.concat(srString, "?omit=</code> line, before the <code>$.each</code> loop for the omitted subreddits. </p>
  
  <p>Here is my code with the debug stuff I put in:</p>
  
  <pre><code>$(document).ready(function () {
      var api = "http://www.reddit.com/api/recommend/sr/";
      var json;
      var redditBaseLink = "http://www.reddit.com/r/";
      var srLink;
      var srArray;
      var srString = '';
      var omitArray, omitString;
  
      // DEBUG CODE
      var codepoint = 0;
      function debug(alertMsg){
          codepoint++;
          alert(codepoint + ": " + alertMsg + " END MSG (refresh page after no more dialogs!!)");
          // copypasta call debug("");
      }
  
      $(".srInputForm").submit(function (event) {
          debug("after submit");
          event.preventDefault();
          debug("after preventDefault");
          srArray = $(this).serializeArray();
          debug("serialize array.");
          $.each(srArray, function (i, field) {
              srString += field.value + ",";
          });
          api = api.concat(srString, "?omit=");
          debug("after first api url making (no omit params). api url: " + api); // STOPS AFTER THIS LINE!
  
          $.each(omitArray, function (i, field) {
              omitString += field.value + ",";
          });
          api = api.concat(omitString);
          debug("final api url making, w/ omit params. api url: " + api);
  
          json = $.getJSON(api, function () {
              debug("JSON get");
              $.each(json, function (i, response) {
                  srLink = "";
                  debug("iteration " + i + ". srLink: " + srLink);
                  srLink = '&lt;div class="recommendation"&gt;' + '&lt;a href="' + redditBaseLink + response.sr_name + '/" target="_blank"&gt;' + response.sr_name + '&lt;/a&gt;&lt;/div&gt;';
                  debug("iteration " + i + ". srLink (after making): " + srLink);
                  $(srLink).hide().appendTo(".recommendationsCol").fadeIn('slow');
                  debug("iteration " + i + ". after append");
              });
          });
      });
  });
  </code></pre>
  
  <p>I'm not too sure if I should make another thread for this new issue? Anybody know how I would go about correcting this? Thanks.</p>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>Hey guys. Sorry about the late update. Been busy at school cracking at the coursework!</p>
  
  <p>So, I have resolved the issue with my project this post was about!</p>
  
  <p>One of the main contributors to my partial success was moving <code>event.preventDefault</code> to the top of the <code>submit()</code> function, giving it brackets because it is a function (<code>event.preventDefault()</code>.</p>
  
  <p>If you'd like to see the JS code as of now, here it is:</p>
  
  <pre><code>/* jshint jquery:true*/
  // omit feature is buggy. will fix later.
  
  $(document).ready(function () {
      var api = "http://www.reddit.com/api/recommend/sr/";
      var redditBaseLink = "http://www.reddit.com/r/";
      var srLink;
      var srArray;
      var srString = '';
      //var omitArray = [];
      //var omitString;
  
      /*// DEBUG CODE
      var codepoint = 0;
  
      function debug(alertMsg) {
          codepoint++;
          alert(codepoint + ": " + alertMsg + " END MSG (refresh page after no more dialogs!!)");
          // copypasta call debug("");
      }*/
  
      $(".srInputForm").submit(function (event) {
          event.preventDefault();
  
          srArray = $(this).serializeArray();
          // omitArray = $(".omitForm").serializeArray();
  
          $.each(srArray, function (i, field) {
              srString += field.value + ",";
          });
          api = api.concat(srString /*, "?omit="*/ );
  
          /*if (omitArray[1].value === "" &amp;&amp; omitArray[2].value === "" &amp;&amp; omitArray[3].value === "") {
              api.replace("?omit=", "/");
          } else {
              $.each(omitArray, function (i, field) {
                  api += field.value + ",";
              });
          }*/
  
          $.ajax({
              //dataType: 'jsonp',
              jsonp: false,
              type: 'GET',
              url: api,
              success: function (json) {
                  $.each(json, function (i, response) {
                      srLink = '&lt;div class="recommendation"&gt;' + '&lt;a href="' + redditBaseLink + response.sr_name + '/" target="_blank"&gt;' + response.sr_name + '&lt;/a&gt;&lt;/div&gt;';
                      $(srLink).hide().appendTo(".recommendationsCol").fadeIn('slow', function () {
                          console.log("Fade in successful.");
                      });
                      srLink = "";
                  });
              },
              error: function () {
                  console.log(arguments);
              }
          });
          api = "http://www.reddit.com/api/recommend/sr/";
      });
  });
  </code></pre>
  
  <p>Once again, thanks for all the help. I've learned from this quite a bit.</p>