IT源码网

js阻止表单提交讲解

itxm 2021年05月16日 编程语言 121 0

以下情况只针对非前后端完全分离!

<a href="'.Yii::app()->createUrl().'" class="label label-sm label-warning" style="width: 80px">查看订单</a>

若想要阻止上述代码的表单提交,可以做如下修改

<a href="'.Yii::app()->createUrl().'" class="label label-sm label-warning" style="width: 80px" onclick="return false;">查看订单</a>

新加了

onclick="return false;"

当你点击链接的时候确实不会实现跳转进行表单提交,但是如何做才能让这个既有拦截判断数据,又能实现表单提交呢

可以这么操作,由于可以在HTML标签里面嵌套php代码,作如下修改

<a href="'.Yii::app()->createUrl().'" class="label label-sm label-warning" style="width: 80px" onclick="'.$flag.'">查看订单</a>

其中的 $flag 是通过php进行判断后赋值的变量,如下:

$flag= a == 1 ? 'return false;' : '';

这样操作之后,在Controller中处理后标签元素并传到View,如果变量不符合要求,直接return false,不让其提交表单,那阻止表单提交后怎么让浏览器弹出alert呢?

可以在对应的View里面写js方法,判断标签<a>点击后的处理事件

$(".label").on('click', function () { 
    if (不满足条件){ 
        alert(''); 
        return false; 
    } 
});

因为在Controller中你已经处理好元素是否能提交表单了,所以这里仅仅需要弹出alert就可以了,没有阻止表单提交的<a>标签自然不会进入到if判断里面,点击后即刻跳转提交表单

前后端完全分离的话,直接阻止表单提交,在js里面写按钮的点击事件,通过ajax进行表单提交,当然,数据处理可以在js里面直接处理,也可以通过ajax提交数据,通过接口返回的值来决定要不要继续提交表单


发布评论

分享到:

IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

H5白屏问题讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。