怎样把表单提交后，把输入框中的数据清空

Posted 2023-05-17

function submit(callback)
document.getElementById("myform").submit();
callback();

function reset()
$('#myform').reset();

function tijiao()
submit(reset);


<form id="myform" action="">
<input type="text" name=""/>
<input type="button" value="提交" onclick="tijiao()"/>
</form>
你如果用js提交后直接重置，有时候会报错，因为正在往后台传值的过程中，你就清空，会获取不到这个值。这就需要js的回调机制，上面我给你写了回调函数。这样就保证了将表单完全提交后才清空input. 参考技术A 最简单的方法给重新给表单赋值为""就可以了。

Angular formControl表单应用：清除input输入框中的值value

Angular 表单formControl应用：清除input输入框中的值value

• 需求描述
• 代码实现

需求描述

这次做的是一个与angular formControl表单相关的需求。
用户操作顺序如下：

1. 有一个input输入框
2. 用户在input中输入内容
3. 点击一个button
4. 保存当前内容，并提交至DataBase
5. 清空input输入框中的value，以供下一次输入。

这样的需求很合理。因为在第一次输入后，用户存在后续第二次或者第三次甚至更多次输入提交操作的可能。但总不可能说去不断刷新页面加载一个新的表单，这样不断请求和加载，开销大，用户也需要等待一次刷新加载的时间。

所以，完全可以在给用户一定的提示后（如显示“提交成功”），便自动清除input输入框中的值。

代码实现

输出input中的value

// 输出原本input输入框的值
//'keyName'是formControl表单的关键字，用于确定某个formControl表单。这里输出的是keyName的value
console.log(this.frmCtrls['keyName'].value);

清除input中的value

// clear the value of 'keyName' input 
// one way to finish this requirement when I tried at the firts time(not recommend)
this.frmCtrls['keyName'].value = "";
// 直接给value赋值，是不是感觉不太好

正确操作

//使用formControl的setValue方法
this.frmCtrls['keyName'].setValue("");