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()
分享到:
相关推荐
其实文件上传有两种方法,一种是from表单submit提交,一种是ajax实现异步提交,可是form表单提交有个问题就是每次在上传完成时会刷新界面,不能实现异步上传,所以现在几乎所有网站都采用ajax异步上传,现在我给大家...
因为今天想写个远程下载图片的类,提前热身写了个php gd库实现远程图片下载功能,当然curl实现更好,php gd库实现远程图片下载功能主要使用gd库的两个函数ImageCreateFromXXX()用于生成图片函数和ImageXXX函数,XXX...
batch-clip基于JavaScript的批量图片裁剪插件支持功能:批量图片载入、文件(File)加载、远程资源加载(URL)、图片缩放、原图载入。钩子函数:图片加载失败、程序中断、裁剪完毕。demo目录内为简单测试案例演示...
Django框架自带csrf_token ,所以需要在前端页面也生成csrf_token字符串,来验证真实客户 <form action="/pic_upload/" method="POST" enctype="multipart/form-data"> {% csrf_token %} <input type=...
jquery.form.js是一款jquery插件,通过该插件并配合jquery-3.3.1.js强大的选择器功能,我们可以非常简单的实现表单的异步提交,并实现文件上传、进度条显示等等,我曾使用两者配合异步实现图片的上传及回显等功能。
前端工作中,经常需要图片裁剪的场景,cropper.js是一款优秀的前端插件,api十分丰富。 本文是在vue-cli项目下封装图片裁剪插件,效果图如下: 话不多说,看步骤吧。 第一步:准备开发环境 cropper.js是基于jquery...
code_final:实现小程序的全部代码design_detail:设计思路和细节image:小程序所需要的图片CS连接:客户和服务端的连接,目前为基础功能的本地简易实现题库:加入到数据库的题目的原始题目小程序二维码:发布后所有人...
后来在小伙伴的介绍下,发现可以用ajaxSubmit()方法来实现此功能。 2. ajaxSubmit()方法简介 (1)ajaxSubmit()依赖 ajaxSubmit()方法是JQuery Form表单插件中的方法,要想使用该插件,可以直接去官网http://jq
最近有朋友反馈artEditor是否支持表单提交,当然是支持的,在未开发该功能之前,你可以像下面这样来实现表单提交 $('.submit').on('click', function(e) { e.preventDefault(); $('.hidden').val($('#artEditor')....
本文实例为大家分享了php上传文件功能的具体代码,供大家参考,具体内容如下 ...input type=submit name=submit value=提交> </form> php: <?php // 允许上传的图片后缀 $allowedExts = a
所谓重新剥离实现,就是在直接借用 camera.swf/locale.xml 这两个文件的前提下,重新编写服务器端的处理程序,实现头像上传功能,脱离 UCenter 独立运行。 理论上任何服务端编程语言都可以,我这里只给出 PHP 的...
EditorStyle:编辑器外观样式选择,目前只实现了officeXP样式 事件: Submit:点击控件中的保存按钮时的触发的事件 事件方法中的e中可以取到控件编辑的内容 如: protected void ItmouseEditor1_Submit1(object sender...
方法一: Home/Index.aspx中的代码 代码如下...input type =”submit” name =”upload” value =”上传” /> <%} %> Homecontroller中的代码 [code] [AcceptVerbs(HttpVerbs.Post)] public ActionResult up
VB6实现表单自动填写功能,并自动提交表单,是一个不用人工填写的自动表单,根据已提供的信息自动填写表单,主要为了演示如利用webbrower控件实现自动填写并提交表单。默认测试用户名/密码均为admin,密保1234,由于...
仅实现了部分功能:轮播图,播放音乐,视频,返回首页等 演示视频:https://www.bilibili.com/video/BV1C5411m7rn?spm_id_from=333.999.0.0 阅读建议: HTML为主要结构,所有内容都是定义在html上的,css则负责对网页...
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...
类似实现CURL 的功能 通过URL 下载服务器网页的资源 比如http://u.download.csdn.net/images/btn_submit.png 只需填入这样的一个URL 就可以下载网页上对应的图片到本地
方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例: $('#elm1').xheditor(); 或者 $('#elm1').xheditor({tools:'mini'}); 特别说明:两种初始化方法只能选择其中一种使用,如果...
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 其他的...