spring-mvc jsp页面关于 button 按钮，点击提交form事件的问题

r囧r小猫 2022-05-30 10:47 257阅读 0赞

### 问题描述 ###

最近在做SSM框架，很多东西不是很熟练，发现一个问题，我的jsp页面有一个form表单，还有一个button按钮，通过按钮来提交表单，但是发现button按钮不起作用，首先这个前台代码是copy的，我个人做后台，这个前台代码我就没怎么改，主要改了自己要的表单变量，代码如下：

<form class="m-form m-form-ht" id="form" method="post"  action="/editSubmit?id=${id}"  onsubmit="return false;"  autocomplete="off">
                <div class="fmitem">
                    <label class="fmlab">标题：</label>
                    <div class="fmipt">
                        <input type="hidden" name="id" value="20"/>
                        <input class="u-ipt ipt" name="title" value="${title}" placeholder="2-80字符"/>
                    </div>
                </div>
                <div class="fmitem">
                    <label class="fmlab">摘要：</label>
                    <div class="fmipt">
                        <input class="u-ipt ipt" name="summary" value="${summary}" placeholder="2-140字符"／>
                    </div>
                </div>
                <div class="fmitem">
                    <label class="fmlab">正文：</label>
                    <div class="fmipt">
                        <textarea class="u-ipt" name="detail" rows="10" placeholder="2-1000个字符">${content}</textarea>
                    </div>
                </div>
                <div class="fmitem">
                    <label class="fmlab">价格：</label>
                    <div class="fmipt">
                        <input class="u-ipt price" name="price" value="${price}"/>元
                    </div>
                </div>
                <div class="fmitem fmitem-nolab fmitem-btn">
                    <div class="fmipt">
                        <button type="submit" class="u-btn u-btn-primary u-btn-lg">保 存</button>
                    </div>
                </div>
            </form>

### 解决方法 ###

在网上找一些资料来了解为什么点击button按钮不执行action内容，后面发现是因为form表单中的οnsubmit=”return false;” 这句话造成的，这句话的意思是：点击button后 form 表单会先执行onsubmit 的内容，这个内容可以是一个JavaScript代码，正产成功后会再执行submit的action，事件返回false，也就是直接不执行你定义的action内容了，所以这么设计的原因就是 在button按钮点击后可以使用相应的js脚本来对表单数据进行验证，验证不通过则弹出提示信息，然后不执行按action内容，同样验证通过后就会执行action。  
此处前台应该是通过自己设定的js脚本来做验证，但是我没有注意到，以为button无效，同样我也没有将相应的js的路径填写正确，总之很多东西应该认真学习，将来继续努力。

### 总结 ###

前台的东西也要接触，很多内容也需要学习。

### 参考博客 ###

相关内容可以参考一下的两篇博客，其中还有源码做分析，大家可以参考一下。  
\- [关于form表单button事件教训][form_button]  
\- [οnsubmit=return false阻止form表单提交][nsubmit_return false_form]

[form_button]: http://blog.csdn.net/cwzhsi/article/details/50234027
[nsubmit_return false_form]: https://www.cnblogs.com/youxin/archive/2012/12/01/2797405.html