title: Javascript & jquery : Unable to increment within a form
body: <p>I got a simple increment function like this:</p>
  
  <pre><code>  $(function(){
      $("#inc").click(function(){
          var value = parseInt($(":text[name='ice_id']").val()) + 1;
          $(":text[name='ice_id']").val(value);
      });
      $("#dec").click(function(){
          var value = parseInt($(":text[name='ice_id']").val()) - 1;
          $(":text[name='ice_id']").val(value);
      });
  });
  </code></pre>
  
  <p>the ice_id text field is embedded within a form </p>
  
  <pre><code>&lt;form id="masterSubmit" name="masterSubmit" action="" method="post"&gt;
       &lt;td&gt;&lt;input id="ice_id" type="text" name="ice_id" size="16" maxlength="15"&gt;&lt;/td&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When I try now to increment , it successfully increments a number, but shows the following weird behavior:
  It 'refreshes' the site, so that the content of the text field is gone. This behavior disappears, if I comment out the form tags ...unfortunately the form tags are required for an AJAX-submit.</p>
  
  <p>Are there any ways to avoid this problem?</p>
  
  <p>Thanks in advance for any hints and
  best regards</p>
  
  <p>Daniyal</p>