`
taomac
  • 浏览: 7763 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

submit功能由图片来实现

阅读更多
1、用图片代替提交按钮submit和重置按钮reset,给图片加onclick事件

<scriptlanguage="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post"action="login.asp">
姓名: <input type="text"name="textfield" />
<img src="uploads/200707/30_145425_001.jpg"onClick="javascript:fsubmit(document.form1);">
<img src="uploads/200707/30_145428_002.jpg"onClick="javascript:freset(document.form1);">
</form>

2、给1的图片加上style,用于弥补方法1鼠标移到图片上无反应,未能给客户好的浏览体验

<scriptlanguage="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post"action="login.asp">
姓名: <input type="text"name="textfield" />
<img src="uploads/200707/30_145425_001.jpg"style="cursor:hand;"onClick="javascript:fsubmit(document.form1);">
<img src="uploads/200707/30_145428_002.jpg"style="cursor:hand;"onClick="javascript:freset(document.form1);">
</form>

3、用图片代替提交按钮submit和重置按钮reset,并加上链接,效果同2

<scriptlanguage="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post"action="login.asp">
姓名: <input type="text"name="textfield" />
<ahref="javascript:fsubmit(document.form1);"><imgsrc="uploads/200707/30_145425_001.jpg" border="0"/></a>
<ahref="javascript:freset(document.form1);"><imgsrc="uploads/200707/30_145428_002.jpg" border="0"/></a>
</form>

4、使用图像域。由于默认图像域点击时都是提交表单,因而要进行适当的处理:

<scriptlanguage="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post"action="login.asp">
姓名: <input type="text"name="textfield" />
<input type="image" name="imageField"onClick="javascript:fsubmit(document.form1);return false;"src="uploads/200707/30_145425_001.jpg">
<input type="image" name="imageField2"onClick="javascript:freset(document.form1);return false;"src="uploads/200707/30_145428_002.jpg">
</form>

要注意的是JS中表单提交和重置事件后必须加(),如submit()和reset()
分享到:
评论

相关推荐

    ajax实现异步文件或图片上传功能

    其实文件上传有两种方法,一种是from表单submit提交,一种是ajax实现异步提交,可是form表单提交有个问题就是每次在上传完成时会刷新界面,不能实现异步上传,所以现在几乎所有网站都采用ajax异步上传,现在我给大家...

    php中使用gd库实现远程图片下载实例

    因为今天想写个远程下载图片的类,提前热身写了个php gd库实现远程图片下载功能,当然curl实现更好,php gd库实现远程图片下载功能主要使用gd库的两个函数ImageCreateFromXXX()用于生成图片函数和ImageXXX函数,XXX...

    batch-clip:基于JavaScript的批量图片裁剪插件,支持功能:图片裁剪、批量图片载入、文件(File)加载、远程资源加载(URL)、图片缩放、原图载入。钩子函数:图片加载失败、程序中断、裁剪完毕

    batch-clip基于JavaScript的批量图片裁剪插件支持功能:批量图片载入、文件(File)加载、远程资源加载(URL)、图片缩放、原图载入。钩子函数:图片加载失败、程序中断、裁剪完毕。demo目录内为简单测试案例演示...

    Django实现图片上传功能步骤解析

    Django框架自带csrf_token ,所以需要在前端页面也生成csrf_token字符串,来验证真实客户 &lt;form action="/pic_upload/" method="POST" enctype="multipart/form-data"&gt; {% csrf_token %} &lt;input type=...

    表单异步提交并实现文件上传、进度条显示等

    jquery.form.js是一款jquery插件,通过该插件并配合jquery-3.3.1.js强大的选择器功能,我们可以非常简单的实现表单的异步提交,并实现文件上传、进度条显示等等,我曾使用两者配合异步实现图片的上传及回显等功能。

    vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能

    前端工作中,经常需要图片裁剪的场景,cropper.js是一款优秀的前端插件,api十分丰富。 本文是在vue-cli项目下封装图片裁剪插件,效果图如下: 话不多说,看步骤吧。 第一步:准备开发环境 cropper.js是基于jquery...

    软件工程课程设计-不刷题小程序项目源码+报告PPT.zip

    code_final:实现小程序的全部代码design_detail:设计思路和细节image:小程序所需要的图片CS连接:客户和服务端的连接,目前为基础功能的本地简易实现题库:加入到数据库的题目的原始题目小程序二维码:发布后所有人...

    利用AjaxSubmit()方法实现Form提交表单后回调功能

    后来在小伙伴的介绍下,发现可以用ajaxSubmit()方法来实现此功能。 2. ajaxSubmit()方法简介 (1)ajaxSubmit()依赖 ajaxSubmit()方法是JQuery Form表单插件中的方法,要想使用该插件,可以直接去官网http://jq

    ArtEditor富文本编辑器增加表单提交功能

    最近有朋友反馈artEditor是否支持表单提交,当然是支持的,在未开发该功能之前,你可以像下面这样来实现表单提交 $('.submit').on('click', function(e) { e.preventDefault(); $('.hidden').val($('#artEditor')....

    简单实现php上传文件功能

    本文实例为大家分享了php上传文件功能的具体代码,供大家参考,具体内容如下 ...input type=submit name=submit value=提交&gt; &lt;/form&gt; php: &lt;?php // 允许上传的图片后缀 $allowedExts = a

    三种版本的在线图片裁剪基于UCenter camera.swf

    所谓重新剥离实现,就是在直接借用 camera.swf/locale.xml 这两个文件的前提下,重新编写服务器端的处理程序,实现头像上传功能,脱离 UCenter 独立运行。 理论上任何服务端编程语言都可以,我这里只给出 PHP 的...

    .NET在线文本编辑器-ItmouseEditor v1.0 源代码

    EditorStyle:编辑器外观样式选择,目前只实现了officeXP样式 事件: Submit:点击控件中的保存按钮时的触发的事件 事件方法中的e中可以取到控件编辑的内容 如: protected void ItmouseEditor1_Submit1(object sender...

    asp.net MVC实现简单的上传功能

    方法一: Home/Index.aspx中的代码 代码如下...input type =”submit” name =”upload” value =”上传” /&gt; &lt;&#37;} %&gt; Homecontroller中的代码 [code] [AcceptVerbs(HttpVerbs.Post)] public ActionResult up

    VB6利用webbrower控件自动填写并提交表单.rar

    VB6实现表单自动填写功能,并自动提交表单,是一个不用人工填写的自动表单,根据已提供的信息自动填写表单,主要为了演示如利用webbrower控件实现自动填写并提交表单。默认测试用户名/密码均为admin,密保1234,由于...

    web前端(html+css+js)简单的仿原神官网静态项目

    仅实现了部分功能:轮播图,播放音乐,视频,返回首页等 演示视频:https://www.bilibili.com/video/BV1C5411m7rn?spm_id_from=333.999.0.0 阅读建议: HTML为主要结构,所有内容都是定义在html上的,css则负责对网页...

    低清版 大型门户网站是这样炼成的.pdf

    8.5 新闻采集功能实现 562 8.6 小结 573 第9章 会员注册及会员管理系统 575 9.1 会员管理系统需求分析 575 9.2 会员管理系统功能设计 576 9.3 会员级别后台管理 578 9.3.1 展示层jsp 2+struts 2标签库实现 579...

    MFC 通过 URL 下载网络资源

    类似实现CURL 的功能 通过URL 下载服务器网页的资源 比如http://u.download.csdn.net/images/btn_submit.png 只需填入这样的一个URL 就可以下载网页上对应的图片到本地

    xheditor-1.1.14

    方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例: $('#elm1').xheditor(); 或者 $('#elm1').xheditor({tools:'mini'}); 特别说明:两种初始化方法只能选择其中一种使用,如果...

    Ext Js权威指南(.zip.001

    8.3.5 实现调整大小功能:ext.resizer.resizer与ext.resizer.resizetracker / 420 8.3.6 为组件提供拖动功能:ext.util.componentdragger / 421 8.3.7 为组件实现动画功能:ext.util.animate / 422 8.3.8 其他的...

Global site tag (gtag.js) - Google Analytics