在我当前的项目中，我有一个html表单，其中包含如下结构：

  <!-- Tab links -->
  <div class="tab_idioma">
    <button class="tabidioma active" id="en-US-tab" onclick="openIdiomaTab(this);" data-id="en-US">en-US</button>
<button class="tabidioma" id="es-ES-tab" onclick="openIdiomaTab(this);" data-id="es-ES">es-ES</button>
<button class="tabidioma" id="pt-BR-tab" onclick="openIdiomaTab(this);" data-id="pt-BR">pt-BR</button>
  </div>

  <!-- Tab content -->
  <div id="en-US" class="tabcontent_idioma" style="display: block;">
    ...
  </div>
  <div id="es-ES" class="tabcontent_idioma" style="display: block;">
    ...
  </div>
  <div id="pt-BR" class="tabcontent_idioma" style="display: block;">
    ...
  </div>

发生的事情是，当我尝试访问第二个（或第三个选项卡）表单时，将表单提交到服务器，然后再填充表单的所有字段，从而将不完整的数据保留在数据库中。

应调用的javascript函数是：

function openIdiomaTab(element) {
  // Declare all variables
  var id = element.dataset.id;
  var i,tabcontent,tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassname("tabcontent_idioma");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassname("tabidioma");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classname = tablinks[i].classname.replace(" active","");
  }

  document.getElementById(id).style.display = "block";
  document.getElementById(id+'-tab').classname += " active";
}

提交过程应由以下功能处理：

function submit_insert() {
  var formData = new FormData(document.getElementById("form"));
  var url = document.getElementById("form").action;

  var xhr = new XMLHttpRequest();
  xhr.open("POST",url);
  xhr.onload = function(event) {
    event.preventDefault();
    document.getElementById('insert').innerHTML = '';
    document.getElementById('table-body').innerHTML = '';
    openTab('listagem-tab','listagem');
    load_content();
  };
  xhr.send(formData);
}

但是对于这种不希望的提交，这不会发生。任何人都可以暗示这里发生的事情吗？