title: JQuery serialize form on button click
body: <p>I have a simple form that i want to submit to JQuery. My following code almost works, but is behaving funny. I have two buttons, a submit(serialize) and a cancel(do nothing). both point to the same javascript function, but when submit is pressed a alert box pops up. On a fresh page load clicking submit will do nothing, but if you click it one more time, it will show the alert box, but twice. If you click it again, it will pop up 3 times and so on and so on. The cancel button, if it is pressed does nothing, however it also adds to the number of times the alert box pops up next time you click submit. I looked at alot of examples, and as far as I can tell, I am doing this correctly</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;head&gt;
    &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/ajax.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form id="test" action=""&gt;
      First name: &lt;input type="text" name="FirstName" value="Mickey" /&gt;&lt;br&gt;
      Last name: &lt;input type="text" name="LastName" value="Mouse" /&gt;&lt;br&gt;
    &lt;/form&gt;
  
    &lt;button id="tbutton" onclick="test()"&gt;Serialize&lt;/button&gt;
    &lt;button id="fbutton" onclick="test()"&gt;do nothing&lt;/button&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>My Function:</p>
  
  <pre><code>function test() {
    $("#tbutton").click(function(){
      alert($('#test').serialize());
    });
  }
  </code></pre>
  
  <p>I would like to get the form info into the AJAX function as it is used elsewhere in my project, and form data is not always used.</p>
  
  <pre><code>function get_node_data(u_id) {
  var xmlhttp;
  var ser_new_area = "";
  
      $("#move").click(function(){
          alert($('#move_node').serialize());
          var ser_new_area = $('#move_node').serialize();
      });
  
  if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
  } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
          document.getElementById("data_main").innerHTML = xmlhttp.responseText;
      }
  }
  
  xmlhttp.open("POST", "AJAX_node_overview.php", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("u_id=" + u_id + "&amp;" + ser_new_area);
  }
  </code></pre>