Svelte组件对接MTurk时表单无法提交指定input字段的问题

针对你用Svelte对接Amazon MTurk时，表单提交后无法获取目标input字段数据的问题，可按以下步骤排查解决：

• 严格遵循MTurk表单字段命名规则
  MTurk仅会收集name属性为answer[字段名]格式的表单数据。确保你的目标input字段的name设置为answer[x]，而非自定义的其他名称。示例：

  <input type="hidden" name="answer[x]" value="-1" />
  <!-- 或双向绑定的情况 -->
  <input type="number" name="answer[x]" bind:value={xValue} />
  

  注意：所有需要提交给MTurk的字段必须放在MTurk指定的<form id="mturk_form">标签内部。

• 验证Svelte绑定与DOM渲染的一致性
  如果使用了Svelte的bind:value双向绑定，可在组件的onMount钩子中检查DOM元素的实际name和value是否正确：

  import { onMount } from 'svelte';
  
  let xValue = -1;
  
  onMount(() => {
    const input = document.querySelector('input[name="answer[x]"]');
    console.log('Input name:', input?.name);
    console.log('Input value:', input?.value);
  });
  

  若发现属性被意外覆盖，需检查是否有其他Svelte逻辑修改了该元素的name属性。

• 通过隐藏字段强制提交数据
  若直接渲染的input存在兼容性问题，可添加一个隐藏字段专门用于提交x列数据，在Svelte中绑定对应的值：

  <form id="mturk_form">
    <!-- 其他已有字段 -->
    <input type="hidden" name="answer[x]" bind:value={xValue} />
    <button type="submit">提交</button>
  </form>
  

  确保xValue在提交时已被设置为-1。

• 调试表单提交数据
  在表单的submit事件中打印FormData，确认目标字段是否被正确包含：

  <form id="mturk_form" on:submit={(e) => {
    e.preventDefault(); // 先阻止默认提交，用于调试
    const formData = new FormData(e.target);
    console.log('表单提交数据:', [...formData.entries()]);
    // 确认包含['answer[x]', '-1']后再取消注释提交
    // e.target.submit();
  }}>
  

  如果FormData中存在目标字段但MTurk未接收，需检查MTurk任务配置是否允许该字段提交。

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