title: Why does this ajax post get called twice?
body: <p>After checking other SO posts, I did not find an answer to my question -- but apparently this type of problem happens to others, just not exactly my problem. But an ajax .post function is being called twice, though I cannot possibly see why. </p>
  
  <p>This is jQuery 1.8.0, using the Firefox (Iceweasel) browser. </p>
  
  <p>Here is my jquery code that attaches functions to four buttons, Edit, Save, New, Cancel. There is also a function that populates a select list:</p>
  
  <pre><code>  var is_new = 0;
  
    $(document).ready(function()
    {
      // Attach event handlers to buttons
      $('#editbtn').on('click',pop_studyname);
      $('#newbtn').on('click',new_studyname);
      $('#savebtn').on('click',save_studyname);
      // disable the Save button until we have something to save
      $('#savebtn').attr('disabled',true);
      // disable the Cancel button until we have something to cancel
      $('#cancelbtn').attr('disabled',true);
  
    });
  
    function pop_studyname()
    {
      // pop the selected studyname into edit box.
      $('#edit_field').val($('#studylist :selected').text());
      // disable the New Study button
      $('#newbtn').attr('disabled',true);
      // enable the Cancel button
      $('#cancelbtn').attr('disabled',false);
      // and bind it to a function
      $('#cancelbtn').on('click',cancel_studyname);    
      // enable the Save button
      $('#savebtn').attr('disabled',false);
      // and bind it to a function
      $('#savebtn').on('click',save_studyname);
    }
  
    function new_studyname()
    {
      // clear edit box.
      $('#edit_field').val('');
      /**************************/
      /* set flag for New Study */
      is_new = 1;
      /**************************/
  
      // Enable the Cancel button
      $('#cancelbtn').attr('disabled',false);
      // and bind it to a function.
      $('#cancelbtn').on('click',cancel_studyname);
      // Disable the Edit button.
      $('#editbtn').attr('disabled',true);
      // Enable the Save button
      $('#savebtn').attr('disabled',false);
      // and bind it to a function.
      $('#savebtn').on('click',save_studyname);
      // put the cursor in the edit box
      $('#edit_field').focus();
    }
  
    function cancel_studyname()
    {
      // clear edit box.
      $('#edit_field').val('');
      // disable cancel button.
      $('#cancelbtn').attr('disabled',true);
      // disable Save button.
      $('#savebtn').attr('disabled',true);
      // Enable the Edit button.
      $('#editbtn').attr('disabled',false);
      // And the New Study button.
      $('#newbtn').attr('disabled',false);
      // Reset new study trigger variable. 
      is_new = 0;
    }
  
    function save_studyname()
    {
      // Are we saving a new or existing Study?
      if (is_new == 1) {
          $.post("saveStudyName.php",
          {'type': 'new', 'studyname': $('#edit_field').val()},
              function(resultmsg) {
                alert(resultmsg);
              }
          );
      // reset the trigger flag
      is_new = 0;
  
      } else {
        // Update an existing Study.
          // Get the record index and edited study name.
          var styndx = $('#studylist option:selected').val();
          var studyname = $('#edit_field').val();
  
      // Use ajax post call to update database.
          $.post("saveStudyName.php",
        {'type': 'update', 'studyname':studyname, 'styndx':styndx}, 
        function(resultmsg) {
                alert(resultmsg);
        });
      }
      // clear the edit field
      $('#edit_field').val('');
      // disable the Save button
      $('#savebtn').attr('disabled',true);
      // Enable the Edit button.
      $('#editbtn').attr('disabled',false);
      // Enable the New Study button.
      $('#newbtn').attr('disabled',false);
      // Finally, refresh the studyname picklist.
      refresh_studynames();
    }
  
    function refresh_studynames()
    {
      // repopulate studylist with update from database...
      // - form the query.
      // - send to database, get the result.
      // - use the result to repopulate the Study name select list.
      $.ajax({                                      
        url: 'getStudyNames.php',        //the script to call to get data          
        data: "",                        //you can insert url argumnets here to pass to api.php
                                         //for example "id=5&amp;parent=6"
        dataType: 'json',                //data format
        error: function() {
          alert('Refresh of study names failed.');
        },
        success: function(data) 
        {
      var $studylist = $('#studylist').empty();
      $.each(data, function(i, record) {
         $studylist.append($("&lt;option/&gt;", {
          value: record.studyindex,
          text: record.studyname
          }));
      });
        } 
      });
    }
  </code></pre>
  
  <p>Looking at the web console and the debugger, I can see that two POSTs (to saveStudyName.php) and two GETs (from getStudyNames.php) are happening, within just a few milliseconds of each other. The first call is the correct one; but the second one should not happen. Because of the logic involved, the parameters in the second call as incorrect and it fails. </p>
  
  <p>For completeness, here is the HTML code:</p>
  
  <pre><code>&lt;body &gt;
  &lt;div id="container"&gt;
    &lt;div id="header"&gt;
      &lt;h1&gt;Admin Module&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div id="navigation"&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="AdminMenu.php"&gt;Admin Menu&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../DNAPortal/DNA_Portal_Menu.php"&gt;DNA Portal&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='../DNAPortal/logout.php'&gt;Logout&lt;/a&gt;&lt;/li&gt;&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;
      &lt;h2&gt;IBG Study Maintenance&lt;/h2&gt;
      &lt;p&gt;
      &lt;form name="StudySelection" action="process_StudyMaint.php" method="POST" onsubmit="return false" &gt;
      &lt;input type=hidden name=studyindex&gt;
      &lt;div id=content-container2&gt;
        &lt;fieldset&gt;
        &lt;LEGEND&gt;&lt;b&gt;Select Study &amp;/or action&lt;/b&gt;&lt;/LEGEND&gt;
      &lt;p&gt;
      &lt;P CLASS=select_header&gt;List of Studies&lt;br&gt;
      &lt;SELECT multiple size=15 NAME="studylist" ID="studylist" STYLE="width: 150px"&gt;
      &lt;?php
          $i=0;
          while ($i &lt; $numstudies) {
              $styarr = pg_fetch_row($studyresult);
              echo "&lt;option value=$styarr[0]&gt;$styarr[1]\n";
              $i++;           
          }
        ?&gt;
      &lt;/select&gt;
      &lt;/p&gt;                
        &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;div  &gt;
  
      &lt;/div&gt;
      &lt;div class="lower_block"&gt;
        Study name:&lt;br&gt;
        &lt;input id="edit_field" type="text" size=30&gt;
        &lt;input type="button" name="editbtn" id="editbtn" value="Edit" sclass="btn"&gt;
        &lt;input type="button" name="savebtn" id="savebtn" value="Save" sclass="btn"&gt;
        &lt;input type="button" name="newbtn" id="newbtn" value="New Study" sclass="btn"&gt;
        &lt;input type="button" name="cancelbtn" id="cancelbtn" value="Cancel" sclass="btn" disabled=TRUE &gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Is there some way to stop the second call from happening? I cannot see any reason why this happen.</p>
  
  <p>Any help much appreciated! SO rocks!</p>
  
  <p>--rixter</p>