HTML表单提交后不跳转仅更新提示文本的实现方法咨询

你要的无刷新多步引导效果不需要做页面跳转，只要预先配置好每一步的提示内容，点击按钮时切换DOM文本即可，具体实现如下：

第一步：预配置多步内容与状态变量 #

先把你需要的每一步的标题、描述、输入框占位符都存在一个数组里，同时加一个变量记录当前走到第几步：

// 配置所有步骤的文案，可根据自己的需求增改步数
const stepConfig = [
  {
    title: "标题1",
    desc: "第一步的提示文本",
    placeholder: "请输入姓名"
  },
  {
    title: "标题2",
    desc: "第二步的提示文本",
    placeholder: "请输入手机号"
  },
  {
    title: "标题3",
    desc: "第三步的提示文本",
    placeholder: "请输入邮箱"
  }
]
// 记录当前步数，默认从0开始
let currentStep = 0
// 存储每一步用户输入的内容，后续需要提交到后端的话直接用这个数组
let userInputs = []

第二步：实现sendMessage函数 #

原来的next按钮绑定的sendMessage函数写下面的逻辑就行：

function sendMessage() {
  const inputEl = document.getElementById('modal-input')
  const inputValue = inputEl.value.trim()
  // 可选：加非空校验，没填内容不让进下一步
  if (!inputValue) {
    alert('请输入内容后再继续')
    return
  }
  // 存当前步骤用户输入的内容
  userInputs.push(inputValue)
  // 步数加1
  currentStep++
  // 判断有没有下一个步骤
  if (currentStep < stepConfig.length) {
    // 更新对应DOM的内容
    document.getElementById('modal-title').innerText = stepConfig[currentStep].title
    document.getElementById('modal-description').innerText = stepConfig[currentStep].desc
    inputEl.placeholder = stepConfig[currentStep].placeholder
    // 清空输入框
    inputEl.value = ''
  } else {
    // 所有步骤走完后的逻辑，比如提交数据、显示完成提示
    document.getElementById('modal-title').innerText = '提交完成'
    document.getElementById('modal-description').innerText = '感谢你的填写'
    // 隐藏输入框和按钮
    inputEl.parentElement.style.display = 'none'
    document.getElementById('modal-submit').style.display = 'none'
    // 要提交到后端的话这里直接发请求就行，比如fetch或者axios发userInputs
  }
}

补充说明 #

如果你的步骤里需要不同的输入类型（比如第一步是文本，第二步是数字），也可以在stepConfig里加个type字段，切换步骤的时候同时修改input的type属性即可。

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