如何使用原生JavaScript在表单无刷新提交后清空input的用户输入内容

你提供的input元素已设置唯一id为day-set，可以直接通过id获取元素，修改其value属性完成清空，具体实现如下： #

1. 核心逻辑说明 #

• 先获取目标input元素和提交按钮/关联表单元素
• 若提交按钮是表单内的type="submit"类型，需要先阻止表单默认提交行为避免页面刷新
• 点击提交时将input的value属性赋值为空字符串即可清空内容

2. 完整代码示例 #

场景1：提交按钮为普通按钮（无默认提交刷新行为） #

按钮代码示例：

<button type="button" id="submit-btn">提交</button>

对应的JS代码：

// 获取元素
const submitBtn = document.getElementById('submit-btn')
const dayInput = document.getElementById('day-set')

// 绑定点击事件
submitBtn.addEventListener('click', function() {
  // 清空输入框，若需要保留原默认值"day"就改为 dayInput.value = 'day'
  dayInput.value = ''
})

场景2：提交按钮在表单内（默认会触发页面刷新） #

表单代码示例：

<form id="date-form">
  <input type="number" class="setter" id="day-set" name="day-set" value="day" max="30" min="0" placeholder="00" onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
  <button type="submit" id="submit-btn">提交</button>
</form>

对应的JS代码：

// 获取元素
const dateForm = document.getElementById('date-form')
const dayInput = document.getElementById('day-set')

// 监听表单提交事件
dateForm.addEventListener('submit', function(e) {
  // 阻止表单默认提交刷新页面的行为
  e.preventDefault()

  // 此处可添加你的提交逻辑，比如数据校验、接口请求等

  // 清空输入框
  dayInput.value = ''
})

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