如何解决重置表格-一个输入变为旧值
我的表单重置按钮无法正常工作。
我有一个带有文本区域和通过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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。