addEventListener() question/weird behavior

Question

I'm developing a game for Facebook. I'm using PHP and FBJS. I'm using addEventListener() to attach events to two buttons. Each button has it's own event handler which is a js function. The first event handler (loadNewCargo()) gets called with no problems. But the second event handler (discardExistingCargo()) causes the page to refresh when it is called. The examples I've seen use a single event handler function for multiple elements. I'm creating one handler for each element. Is this illegal? Here's the code ('load-new-submit' and 'discard-existing-submit' are the IDs for the two buttons on the dialog):

function loadCargo() {
  var actionPrompt = document.getElementById('action-prompt');
  actionPrompt.setTextValue('Loading cargo...');

  var ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  ajax.ondone = function(data) {
//debugger;
    ajax.responseType = Ajax.FBML;
    ajax.ondone = function(fbjsData) {
//debugger;
      if(data.loadableCargo.length == 0) {
        moveTrainManual();
      } else {
        var dialog = new Dialog().showChoice('Load Cargo', fbjsData, 'Minimize', 'Pass');

        var dlgBtnNew = document.getElementById('load-new-submit');
        dlgBtnNew.cityId = data.loadableCargo.city_id;
        dlgBtnNew.trainId = data.loadableCargo.train_id;
        dlgBtnNew.addEventListener('click', loadNewCargo);
/**/
        var dlgBtnDiscard = document.getElementById('discard-existing-submit');
        dlgBtnDiscard.cityId = data.loadableCargo.city_id;
        dlgBtnDiscard.trainId = data.loadableCargo.train_id;
        dlgBtnDiscard.addEventListener('click', discardExistingCargo);
/**/
        dialog.onconfirm = function() {
          // Submit the form if it exists, then hide the dialog.
          dialog.hide();
          actionPrompt = document.getElementById('action-prompt');
          actionPrompt.setInnerXHTML('<span><div id="action-text">'+
            'The "Load cargo" dialog has been minimized'+
            '</div>'+
            '<div id="action-end">'+
            '<form action="" method="POST">'+
            '<input type="button" value="Maximize" id="next-phase" onclick="loadCargo();" />'+
            '</form>'+
            '</div></span>');
          actionButton = document.getElementById('next-phase');
          actionButton.setValue('Maximize');
          actionButton.addEventListener('click', loadCargoEventHandler);
        };
        dialog.oncancel = function() {
          moveTrainManual();
        }
      }
    }
    ajax.post(baseURL + '/turn/load-cargo-dialog-fbjs', data);
  }
  ajax.post(baseURL + '/turn/load-cargo');
}

function loadCargoEventHandler(evt) {
  if(evt.type == 'click') {
    var dialog = new Dialog().showChoice('Load Cargo', fbjs_load_cargo_select, 'Minimize', 'Pass');
    dialog.onconfirm = function() {
      // Submit the form if it exists, then hide the dialog.
      dialog.hide();
      var actionPrompt = document.getElementById('action-prompt');
      actionPrompt.setInnerXHTML('<span><div id="action-text">'+
        'The "Load cargo" dialog has been minimized'+
        '</div>'+
        '<div id="action-end">'+
        '<form action="" method="POST">'+
        '<input type="button" value="Maximize" id="next-phase" onclick="loadCargo();" />'+
        '</form>'+
        '</div></span>');
      var actionButton = document.getElementById('next-phase');
      actionButton.setValue('Maximize');
      actionButton.addEventListener('click', loadCargoEventHandler);
    };
    dialog.oncancel = function() {
      moveTrainManual();
    }
  }
}

function loadNewCargo(evt) {
  //new Dialog().showMessage('loadNewCargo', 'city id='+cityId+', train id='+trainId);
//debugger;
  cityId = evt.target.cityId;
  trainId = evt.target.trainId;

  ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  param = { 'load-cargo-submit': "Load new goods", 'city-id': cityId, 'train-id': trainId };
  ajax.ondone = function(data) {
    openCargoHolds = data.openCargoHolds;
    cargoHoldsUsed = 0;
    ajax.responseType = Ajax.FBML;
    param = { 'openCargoHolds': data.openCargoHolds, 'cityGoods': data.cityGoods, 'trainId': data.trainId };
    ajax.ondone = function(fbjsData) {
//debugger;
      var dialog = new Dialog().showChoice('Load Cargo', fbjsData, 'Load cargo', 'Cancel');
      dialog.onconfirm = function() {
        var goods = [];
        var goodsIds = [];
        numGoods = document.getElementById('goods-count').getValue();

        for(var i = 0; i < numGoods; i++) {
          j = i + 1;
          goods[i] = document.getElementById('goods-' + j).getValue();
          goodsIds[i] = document.getElementById('goods-id-' + j).getValue();
        }
        var trainId = document.getElementById('train-id').getValue();
        param = { "goods": goods, "goods-id": goodsIds, "train-id": trainId };
        ajax.responseType = Ajax.JSON;
        ajax.ondone = function(data) {
          loadCargo();
        }
        ajax.post(baseURL + '/turn/do-load-cargo-new', param);
        //dialog.hide();
      };
      dialog.oncancel = function() {
        loadCargo();
      }
    }
    ajax.post(baseURL + '/turn/load-cargo-new-dialog-fbjs', param);
  }
  ajax.post(baseURL + '/turn/load-cargo-select', param);
}

function discardExistingCargo(evt) {
  //new Dialog().showMessage('loadNewCargo', 'city id='+cityId+', train id='+trainId);

  cityId = evt.target.cityId;
  trainId = evt.target.trainId;
/**/
  ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  param = { 'load-cargo-submit': "Discard existing goods", 'city-id': cityId, 'train-id': trainId };
  ajax.ondone = function(data) {
    ajax.responseType = Ajax.FBML;
    param = { 'openCargoHolds': data.openCargoHolds, 'trainGoods': data.trainGoods, 'trainId': data.trainId };
    ajax.ondone = function(fbjsData) {
      var dialog = new Dialog().showChoice('Discard Cargo', fbjsData, 'Discard cargo', 'Cancel');
      dialog.onconfirm = function() {
        var goods = [];
        var goodsIds = [];
        numGoods = document.getElementById('goods-count').getValue();
        for(var i = 0; i < numGoods; i++) {
          j = i + 1;
          goods[i] = document.getElementById('goods-' + j).getValue();
          goodsIds[i] = document.getElementById('goods-id-' + j).getValue();
        }
        var trainId = document.getElementById('train-id').getValue();
        param = { "goods": goods, "goods-id": goodsIds, "train-id": trainId };
        ajax.responseType = Ajax.JSON;
        ajax.ondone = function(data) {
          loadCargo();
        }
        ajax.post(baseURL + '/turn/do-load-cargo-discard', param);
        //dialog.hide();
      };
      dialog.oncancel = function() {
        loadCargo();
      }
    }
    ajax.post(baseURL + '/turn/load-cargo-discard-dialog-fbjs', param);
  }
  ajax.post(baseURL + '/turn/load-cargo-select', param);
/**/
}

Thank you for any assistance you can offer.

Answer 1

Problem solved: the button's input type was "submit", hence the page refresh (doh!)

Answer 2

You can return false; from the discardExistingCargo function to avoid the default submit action - which is causing the page to refresh.