动态HTML表单元素重新索引后提交值为空的问题求助

嘿，我看了你遇到的问题——动态表单里增删元素后，明明标签显示的索引是对的，但提交时却出现空值，这确实挺让人挠头的。我帮你梳理了下代码里的几个关键问题，应该能解决你的困扰：

问题根源分析 #

1. 选择器失效导致name属性未更新
   你在重新索引的函数里，比如renumberQuestionChoices，用了input[name="cloneChoice"]来定位元素，但第一次克隆元素后，这个input的name已经被改成了quizQuestion[X].questionChoice[Y].choicePrompt，后续删除再重新索引时，用原始的name值根本找不到这些元素，自然没法更新它们的name属性。提交时这些元素的name还是旧的（甚至可能重复或不符合后端预期），所以后端接收不到值，表现为空。

2. Message索引逻辑错误
   在renumberMessages函数里，你用了messageCounter（当前Message的总数量）作为数组索引，而不是循环自带的index。比如删除一个Message后总数量是2，所有Message的name都会变成personalizedMessage[2].message，这样后端只会接收到最后一个Message的值，其他的要么被覆盖要么为空。

解决方案 #

第一步：给需要更新的元素添加固定类名

修改HTML模板里的表单元素，给它们加上专属类名，这样不管name怎么变，都能精准定位：

<!-- 修改choiceTemplate -->
<div id="choiceTemplate" style="display: none;" class="cloneContainerClass">
  <label> Choice: </label> <input type="text" name="cloneChoice" class="choice-prompt-input" />
  <label for="cloneValueChoice">Choice:</label>
  <select id="cloneValueChoice" name="cloneValueChoice" class="choice-value-select">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
  </select>
  <button type="button" class="choiceDeleteButton">Delete Choice</button>
</div>

<!-- 修改cloneMessageContainer -->
<div id="cloneMessageContainer" style="display: none;" class="cloneMessageClass">
  <label> Message: </label> <input type="text" style="width: 400px; height: 75px;" name="cloneMessageText" class="message-text-input" />
  <label for="cloneMessage">Corresponds to Choice: </label>
  <select id="cloneMessage" name="cloneMessageChoice" class="message-choice-select">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
  </select>
  <button type="button" class="deleteMessageButton">Delete Message</button>
</div>

第二步：修改重新索引函数的选择器和逻辑

把所有依赖原始name的选择器换成类选择器，同时修正Message的索引逻辑：

// 修正renumberQuestionChoices函数
function renumberQuestionChoices(questionDiv) {
  var choiceList = questionDiv.find('.choiceList');
  var questionIndex = questionDiv.index();
  choiceList.each(function(choiceIndex) {
    var newId = "choice" + (choiceIndex);
    $(this).attr("id", newId);
    var newLabel = "Choice: " + (choiceIndex + 1);
    $(this).find("label").first().text(newLabel); // 确保只修改第一个标签
    // 用类选择器定位元素
    $(this).find('.choice-prompt-input').prop('name', `quizQuestion[${questionIndex}].questionChoice[${choiceIndex}].choicePrompt`);
    $(this).find('.choice-value-select').prop('name', `quizQuestion[${questionIndex}].questionChoice[${choiceIndex}].choiceValue`);
  });
}

// 修正renumberQuestionsAndChoices函数里的选择器
function renumberQuestionsAndChoices() {
  var originalDiv = $("#questionContainer");
  var questionList = originalDiv.find('.questionList');
  questionList.each(function(questionListIndex) {
    var newId = "container" + (questionListIndex);
    $(this).attr("id", newId);
    var newLabel = "Question: " + (questionListIndex + 1);
    $(this).find("label").first().text(newLabel);
    $(this).find('input[name="questionPromptClone"]').prop('name', `quizQuestion[${questionListIndex}].prompt`);
    
    $(this).find('.choiceList').each(function(choiceIndex) {
      var newId = "choice" + (choiceIndex);
      $(this).attr("id", newId);
      var newLabel = "Choice: " + (choiceIndex + 1);
      $(this).find("label").first().text(newLabel);
      // 替换为类选择器
      $(this).find('.choice-prompt-input').prop('name', `quizQuestion[${questionListIndex}].questionChoice[${choiceIndex}].choicePrompt`);
      $(this).find('.choice-value-select').prop('name', `quizQuestion[${questionListIndex}].questionChoice[${choiceIndex}].choiceValue`);
    });
  });
}

// 修正renumberMessages函数的索引逻辑
function renumberMessages() {
  var messageList = $(".messageList");
  if (messageList.length === 0) {
    return;
  }
  messageList.each(function(index) {
    var newId = "message" + (index);
    $(this).attr("id", newId);
    var newLabel = "Message: " + (index + 1);
    $(this).find("label").first().text(newLabel);
    // 用循环的index作为数组索引，同时用类选择器定位
    $(this).find('.message-text-input').prop('name', `personalizedMessage[${index}].message`);
    $(this).find('.message-choice-select').prop('name', `personalizedMessage[${index}].answerChoice`);
  });
}

额外小提示 #

克隆元素时，可以先移除模板的id再设置新id，避免页面出现重复id的问题（比如clonedChoiceDiv.removeAttr('id').attr('id', choiceId)），虽然这不是导致空值的直接原因，但能避免潜在的DOM问题。

这样修改后，重新索引时就能正确找到所有需要更新的元素，设置正确的name属性，后端就能正常接收到表单值了。

备注：内容来源于stack exchange，提问作者Bronwyn Young