如何实现无错误时用一个按钮提交两个SharePoint表单？

核心思路 #

放弃单个表单的自动提交逻辑，改用自定义按钮统一触发两个表单的校验，只有当两者都通过校验时，再分别提交到对应的SharePoint列表。

1. 自定义提交按钮与校验逻辑 #

给页面上的提交按钮绑定点击事件，手动触发两个表单的内置校验，只有都合法才执行提交：

// 绑定提交按钮点击事件
document.getElementById('syncSubmitBtn').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止按钮默认跳转行为
  
  // 获取两个表单DOM元素
  const form1 = document.getElementById('form1');
  const form2 = document.getElementById('form2');
  
  // 触发表单校验（会自动显示HTML5内置的错误提示）
  const form1Valid = form1.checkValidity();
  const form2Valid = form2.checkValidity();
  
  // 只有两个表单都通过校验，才执行提交
  if (form1Valid && form2Valid) {
    // 分别提交到两个SharePoint列表
    submitToSPList(form1, 'https://your-site/_api/web/lists/getbytitle("列表1")/items');
    submitToSPList(form2, 'https://your-site/_api/web/lists/getbytitle("列表2")/items');
  }
});

2. 封装SharePoint列表提交函数 #

把提交逻辑封装成可复用的函数，用SharePoint REST API实现数据提交：

function submitToSPList(form, listApiUrl) {
  // 序列化表单数据为SharePoint接受的格式
  const formData = new FormData(form);
  const itemData = {};
  formData.forEach((val, key) => {
    itemData[key] = val;
  });
  
  // 获取页面内置的请求摘要（防CSRF）
  const requestDigest = document.getElementById('__REQUESTDIGEST').value;
  
  // 发送POST请求提交数据
  fetch(listApiUrl, {
    method: 'POST',
    headers: {
      'Accept': 'application/json;odata=verbose',
      'Content-Type': 'application/json;odata=verbose',
      'X-RequestDigest': requestDigest
    },
    body: JSON.stringify({
      '__metadata': { 'type': 'SP.Data.列表1ListItem' }, // 替换为对应列表的实体类型
      ...itemData
    })
  })
  .then(res => res.json())
  .then(data => console.log('提交成功:', data))
  .catch(err => console.error('提交失败:', err));
}

3. 关键注意事项 #

• 替换代码中的表单id（form1/form2）、SharePoint站点URL、列表名称为实际值
• 列表实体类型（如SP.Data.列表1ListItem）可通过访问https://your-site/_api/web/lists/getbytitle("列表名")/ListItemEntityTypeFullName获取
• 若使用经典页面的SP.js或SPFx框架，只需调整submitToSPList函数的提交逻辑，校验逻辑保持一致
• 可给提交按钮添加加载状态（如点击后禁用按钮），避免重复提交

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