重置表格-一个输入变为旧值

编程问答 2022-08-16

问题描述

我的表单重置按钮无法正常工作。

我有一个带有文本区域和通过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提交的值保留为两个输入的值？为什么在文本区域而不是文本输入字段中已经发生了这种情况？

解决方法

进行设置，以使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>

ajaxformsjqueryresetresponse