按回车键通过AJAX提交表单失效，循环场景下问题排查

你的代码主要存在几个关键问题，咱们一步步拆解并修复：

1. 表单嵌套的HTML语法错误 #

HTML规范绝对不允许表单嵌套，你在外层<form>标签里又嵌套了每个项目的编辑表单，这会导致浏览器解析混乱，直接让表单提交行为完全偏离预期。

2. JS函数无法匹配动态生成的表单 #

原来的editName()函数固定使用$('#newName')选择表单，但现在每个表单的ID是动态生成的newName_{{ projectName.project_id }}，函数根本找不到对应表单，自然无法正确序列化数据。

修复后的完整代码示例 #

第一步：修正HTML结构（移除嵌套表单） #

{% for projectName in namesOfProjects %}
<tr>
  <td>{{ projectName.project_id }}</td>
  <td>
    <button class="show-hide-field toggle_button" id="{{ projectName.project_id }}">{{ projectName.project_name }}</button>
    <!-- 独立的编辑表单，不再嵌套在外层form中 -->
    <form method="POST" id="newName_{{ projectName.project_id }}" action="javascript:void(0);" onsubmit="return editName(this)">
      <input type="text" id="input_{{ projectName.project_id }}" name="new_name" class='input_new_name' data-target="{{ projectName.project_id }}" placeholder="{{ projectName.project_name }}" >
      <input type="submit" hidden>
    </form>
  </td>
  <td>
    <!-- 给删除按钮添加动态ID，避免多个按钮共用同一ID的冲突问题 -->
    <button id="delete_{{ projectName.project_id }}" class="btn btn-danger">Delete</button>
  </td>
</tr>
{% endfor %}

第二步：修改JS函数，适配动态表单 #

function editName(form) {
  // 直接使用传入的当前表单元素序列化数据
  var msg = $(form).serialize();
  
  $.ajax({
    type: 'POST',
    url: '../edit/editprojectname',
    data: msg,
    success: function() {
      window.location.reload();
      // 也可以做局部刷新（不用重载整个页面）：
      // var projectId = $(form).find('.input_new_name').data('target');
      // $('#' + projectId).text($(form).find('input').val());
      // $(form).hide();
    }
  });
  // 阻止表单默认提交行为
  return false;
}

更优雅的方案：使用事件委托（推荐） #

如果不想在HTML中写onsubmit属性，可以用jQuery的事件委托绑定所有动态生成的表单提交事件，代码更整洁：

HTML（移除onsubmit属性）

<form method="POST" id="newName_{{ projectName.project_id }}" action="javascript:void(0);">
  <!-- 输入框和隐藏提交按钮保持不变 -->
</form>

JS代码

$(document).on('submit', 'form[id^="newName_"]', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  var $form = $(this);
  var msg = $form.serialize();
  
  $.ajax({
    type: 'POST',
    url: '../edit/editprojectname',
    data: msg,
    success: function() {
      window.location.reload();
      // 或局部更新项目名称，提升用户体验
    }
  });
});

这种方式不管后续动态生成多少表单，事件都会自动绑定，避免了重复编写onsubmit的冗余代码。

内容的提问来源于stack exchange，提问作者Andreykin Sergey