表单重置 - 一个输入获取旧值答案

【问题标题】：Form reset - One input gets old value表单重置 - 一个输入获取旧值
【发布时间】：2020-08-17 12:43:05
【问题描述】：

我的表单重置按钮没有按预期工作。

我有一个带有文本区域的表单和一个通过 Ajax 提交的文本输入。然后将 Ajax 响应用于表单输入的值。当我单击重置按钮时，文本输入字段的值恢复为提交前的值。但是，textarea 会保留刚刚提交的值。

HTML：

<form id="formID" name="formName">
    <textarea name="taName" id="taID"></textarea><br>
    <input name="textName" id="textID"><br>
    <input id="submitID" name="submitName" class="buttons" value="Save" type="submit">
    <input id="resetID" name="resetName" class="buttons" value="Reset" type="reset">
</form>

JS：

$.ajax({
    url : "page.php",
        type: "post",
        data: "process=saveReturn",
        dataType: 'json',
        success : function (response) {
            var pcodesR = response[0];
            var erpageR = response[1];
            
            $("#taID").empty();                                         
            $("#taID")[0].append(pcodesR);
            $("#textID").val('');
            $("#textID").val(erpageR);
            console.log(pcodesR);
            console.log(erpageR);
...

控制台日志确实为每个输入显示了正确的、刚刚提交的值。

我怎样才能使 ajax 提交的值在单击重置按钮时保持为两个输入的值，为什么 textarea 已经发生这种情况，但文本输入字段却没有？

【问题讨论】：

标签： jquery ajax forms response reset

【解决方案1】：

使 ajax 提交的值在重置按钮时保持为两个输入的值

当您单击button type='reset' 时，它会恢复为“默认”值。对于textarea，这是通过在文本区域内设置文本节点来定义的，例如：

<textarea>default value</textarea>

这就是你对这段代码所做的：

$("#taID").empty();                                         
$("#taID")[0].append(pcodesR);

...设置默认值；这样适用于您的文本区域。

input type=text 的等效项是设置value 属性：

$("#textID").attr("value", erpageR);

例子：

$("#btn").click(() =>
{
    $("#taID").empty();                                         
    $("#taID")[0].append("default");

    $("#textID").attr("value", "default");
    
    // also set the values at this time as the above sets the default values only
    $("#taID").val("default");
    $("#textID").val("default");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formID" name="formName">
    <textarea id="taID"></textarea><br>
    <input id="textID"><br>
    <input id="submitID" name="submitName" class="buttons" value="Save" type="submit">
    <input id="resetID" name="resetName" class="buttons" value="Reset" type="reset">
</form>
<hr/>
<button type="button" id="btn">click to set default values via code</button>

【讨论】：