title: AJAX not working within form and instantly sending me to PHP script? PHP/AJAX
body: <p>I've currently got a feature on my web application where you can add your skills by clicking the <code>"Add a Skill"</code> button, very simple and worked up until I tried to add something else into the mix. The error is the fact that when I click the "Add a Skill" button it acts as if that were the submit button and try's to execute the php script <code>skills/add</code></p>
  
  <p>I'm currently trying to make it so that my application constantly checks whether the text which the user is typing exists within the database which is represented with a green tick or red cross if it doesn't exist.</p>
  
  <p>What I'm asking is can anyone see why this is not working as it should be?</p>
  
  <p>VIEW</p>
  
  <pre><code>&lt;form method="post" action="skills/add" id="container"&gt;  
  
  &lt;script&gt;
  
  $.fn.addSlide = function () {
  return this.each(function () {
      var $this = $(this),
          $num = $('.slide').length++,
          $name = $('&lt;input type="text" class="inputField" id="autoskill-' + $num + '" name="skill-' + $num + '" placeholder="What\'s your skill?"&gt;&lt;/div&gt;&lt;img id="tick" src="/images/tick.png" width="16" height="16"/&gt;&lt;img id="cross" src="/images/cross.png" width="16" height="16"/&gt;');
          $slide = $('&lt;br&gt;&lt;div class="slide" id="slider-' + $num + '"&gt;&lt;/div&gt;&lt;br&gt;'),
          $amt = $('&lt;input name="amount-' + $num + '" id="amount-' + $num + '" class="inputField" readonly placeholder="Slide to select this skill level..."/&gt;&lt;br&gt;');
      $this.append($name).append($amt).append($slide);
      console.log($('#autoskill'));
      $slide.slider({
          value: 0,
          min: 0,
          max: 5,
          step: 1,
          slide: function (event, ui) {
              $amt.val(ui.value); 
          }
      });
  });
  }
  
  $('body').on('click', '.addNew', function(event) {
  event.preventDefault();
  $('#newFields').addSlide();
  }); 
  
  var count = 0;  
  
  $(document).ready(function(){   
  
  $('.inputField').keyup(skill_check);
  
  function skill_check(){
      var skill = $('.inputField').val();
      if(skill == "" || skill.length &lt; 4){
      $('.inputField').css('border', '3px #CCC solid');
      $('#tick').hide();
  }else{
      jQuery.ajax({
         type: "POST",
         url: "skills/auto",
         data: 'name='+ skill,
         cache: false,
         success: function(response){
              if(response == 1){
                  $('.inputField').css('border', '3px #C33 solid');   
                  $('#tick').hide();
                  $('#cross').fadeIn();
              }else{
                  $('.inputField').css('border', '3px #090 solid');
                  $('#cross').hide();
                  $('#tick').fadeIn();
               }
          }
      });
  
  }
  
  $('.addNew').click( function(event){
      event.preventDefault();
      $('#length').html(count);       
      count++;
  });
  
  $('.submitButton').click( function(event){
      $('#container').append('&lt;input type="hidden" name="count" value="' + count + '"&gt;');
  });
  
  });
  
  &lt;/script&gt;
  
  &lt;button class="addNew submitButton"&gt; Add a Skill &lt;/button&gt;&lt;br&gt;
  
  &lt;div id="newFields"&gt;&lt;/div&gt;
  
  &lt;input type="submit" class="submitButton" value="Save Skills"&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Thanks for your help in advance.</p>