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

问题描述

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

总结

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

参考博客

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

猜你喜欢

转载自blog.csdn.net/randompeople/article/details/79511306