表单重置 - 一次输入获得旧值

Question

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

我有一个带有文本区域和文本输入的表单，该表单正在通过 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 提交的值在单击重置按钮时保留为两个输入的值，为什么文本区域已经发生这种情况而不是文本输入字段？

Answer 1

make it so the ajax submitted value remains as the value for both inputs when the reset button

当您单击 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>

表单重置 - 一次输入获得旧值

Form reset - One input gets old value

forms

ajax

jquery

response

reset