现在位置首页 / 项目实战 /正文

图片作为Form表单的submit提交按钮的几个方式实现

作者: IT小兵 | 2014年3月16日| 热度:℃ | 评论: |参与:

Form作为网页数据提交的主流方式,form的提交是一种标准的方式:submit按钮。

但是有时候,我们也需要一些特殊处理。比如:图片作为提交动作的触发控件。

这样的应用场景很多。原来大部分处理操作是这样的:

1、图片触发事件:使用ajax完成数据交互。

2、如果需要页面跳转,再数据交互完成后,跳转。


现在想,直接点击图片完成form提交。所以需要给图片绑定submit时间了。

实现方式:

1、input 方式:设置src为图片

<form name="test.cfm" method="post">
    <input type="text" name="txtA" value="">
    <br>
    <input type="image" src="images/img_borrower/process/continuebuttA.gif" name="submit"  align="" >
</form>

2、Css样式方式:有点投机取巧

<input type="submit"  value="" 
style="border:0px;cursor:hand;width:80px;
background-image:url('3450038789542929712.jpg');height:20px" />  
<input type="reset"  value="" style="border:0px;cursor:hand;width:80px;
background-image:url('/images/reset.gif');height:20px" />

提取样式出来也可以:

.imgClass { 
    background-image: url(http://inspectelement.com
            /wp-content/themes/inspectelementv2/style/images/button.png);
    background-position:  0px 0px;
    background-repeat: no-repeat;
    width: 186px;
    height: 53px;
    border: 0px;
    background-color: none;
    cursor: pointer;
    outline: 0;}.imgClass:hover{ 
      background-position:  0px -52px;}.imgClass:active{
      background-position:  0px -104px;}

3、隐藏真实的submit控件,用图片触发该按钮的提交事件:也是有点投机取巧。chrome IE11会有下面登入按钮的一小块样子。


<form action="http://mp.mobilemedia.cn/wxtest/openwx.html?as=as&amp;asa2=w22323" method="post" id="formimg">
<img type="image" name="submitss" onclick="submitx();" 
src="http://mp.mobilemedia.cn/QRcode/20136281523434688.jpg">
<input style="height:0px;width:0px;" id="btnsub" type="submit" value="登入"> 
</form>


转发注明:IT分享 http://www.suchso.com 


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询