表单提交前判断表单是否被修改过

秒速五厘米 2022-08-26 01:00 229阅读 0赞

## 功能描述 ##

有时，页面表单需要判断是否已经被修改过，若没修改过，可能不需要提交或做其他操作，若修改过，提醒用户是否需要保存，这样的场景在web页面中可以实现。

## 页面效果 ##

![Center][]

## 代码示例 ##

使用jquery就可以比较容易实现

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp; &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;<br> &lt;script&gt; &nbsp; &nbsp;<br> $(function() { <br> &nbsp; $("#myform :input").change(function(){ <br> &nbsp; &nbsp;$("#myform").data("changed",true); &nbsp;<br> &nbsp; });<br> &nbsp;&nbsp;<br> }); &nbsp;<br> function mysubmit(){ <br> alert($("#myform").data("changed"));<br> &nbsp; if($("#myform").data("changed")){ <br> &nbsp; &nbsp; &nbsp;alert("输入框修改过！")<br> &nbsp; }else{ <br> &nbsp; &nbsp; alert("没有修改过，继续！");<br> &nbsp; }<br> <br> <br> }<br> &lt;/script&gt;<br> &nbsp;&lt;/HEAD&gt;<br> <br> <br> &nbsp;&lt;BODY&gt;<br> &nbsp;&lt;form id="myform"&gt;<br> &nbsp;&lt;input type="text" name="aa"/&gt;<br> &nbsp;&lt;input type="text" name="bb"/&gt;<br> &nbsp;&lt;select&gt;&lt;option&gt;aaa&lt;/option&gt;&lt;option&gt;bbb&lt;/option&gt;&lt;/select&gt;<br> &lt;input type="button" value="提交" οnclick="mysubmit()"/&gt;<br> &nbsp;&lt;/form&gt;</td> 
  </tr> 
 </tbody> 
</table>

[Center]: /images/20220824/e5b0e0bde1fb48688789466f776e1dbd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关提交表单与验证表单案例

提交表单与验证表单案例学习路线：[JavaScript基础语法（输出语句）][JavaScript]\->[JavaScript基础语法（变量）][JavaScript

悠悠/ 2024年03月31日 13:34/ 0 赞/ 95 阅读

相关 html禁止form表单提交表单提交,onsubmit阻止表单提交

在实际开发中往往会遇到检查表单数据的合法性，如果数据不合法，就不让其提交。 Bootstrap 实例 - 提交表单验证 //---> function checksubm

骑猪看日落/ 2022年10月07日 11:57/ 0 赞/ 448 阅读

相关 form表单提交前验证

<form action="" method="post" id="login-form" onsubmit="return toVaild()"> <inp

清疚/ 2022年08月30日 11:57/ 0 赞/ 293 阅读

相关表单提交前判断表单是否被修改过

功能描述有时，页面表单需要判断是否已经被修改过，若没修改过，可能不需要提交或做其他操作，若修改过，提醒用户是否需要保存，这样的场景在web页面中

秒速五厘米/ 2022年08月26日 01:00/ 0 赞/ 230 阅读

相关表单提交前触发函数

直接看代码 <form id="payForm" action="yeepaypay.html" target="\_blank" method="post" οnsubmi

Bertha 。/ 2022年08月25日 14:43/ 0 赞/ 145 阅读

相关 php 表单提交表单前端验证

//HTML 代码 <form id="form"> <input type="hidden" name="status" v

た入场券/ 2022年06月09日 09:21/ 0 赞/ 355 阅读

相关 html form表单提交前验证

可以使用form表单的onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。 onsubmit指定的方法返回true，则提交数据；返回false不提交数据。

柔光的暖阳◎/ 2022年05月14日 10:59/ 0 赞/ 314 阅读

相关 form表单提交（非ajax提交）前表单校验

<form action="{:url('index/index/loginadd')}" method="post" > <div class="userN

ゝ一世哀愁。/ 2021年10月13日 02:59/ 0 赞/ 665 阅读

相关表单提交

form表单提交可以使用以下两种方式 1. input <input class="btn btn-main" type="submit" placeholder

太过爱你忘了你带给我的痛/ 2021年09月28日 22:34/ 0 赞/ 568 阅读

相关 jQuery:提交表单前判断表单是否被修改过

$("\myform :input").change(function() \{ $("\myform").data("changed",true); \}

小灰灰/ 2021年06月24日 13:59/ 0 赞/ 418 阅读