【js笔记】神奇的js将a标签转换为超强的submit按钮

标题可能说的有点浮夸了0.o

在以前做页面的时候,是将form表单中的提交按钮写成

<input type="submit" />

但是,总是觉得没有a标签设置样式好用,所以写了这样一个js函数来实现将a标签转换为submit按钮。

先上码:

js代码:

// 将a标签可用于表单(form)的提交js函数
//适用于一个form中有多个submit情况
function tosubmit(action_str){
    var myform=document.getElementById("myform");
    if(action_str==null){
          myform.submit();
    }else{
        myform.action= action_str;
        myform.submit();
    }
    return false;
}

使用方法:

<form action=" action地址" class="myform" id="myform">
                    <input  name = "searchContent" value="${searchContent }"type="text" />
                    <div class="search-list">
                    <a href="#" class="search-btn" onclick="tosubmit(‘action地址1‘)">搜索1</a>
                            <ul>
                                    <li><a href="#" onclick="tosubmit(‘action地址2‘)">搜素2</a></li>
                                    <li><a href="#" onclick="tosubmit()">搜索3</a></li>
                            </ul>
                    </div>
                    </form>

说明:

  1.将a标签中href设置为“#”;

  2.设置oclick来调用js函数,如果填入参数,则跳转到指定的action

  3.默认如果不填参数是跳转到form的action

时间: 2024-11-03 03:46:41

【js笔记】神奇的js将a标签转换为超强的submit按钮的相关文章

# JS笔记(1)

 JS理论: 1.JavaScript是一个客户端脚本 ------工作在客户端的浏览器完成:相对应的PHP.ASP.NET .JSP 是一个服务端脚本. 2.JS可以插入到HTML中的任意一个位置,不过HTML解析式从上往下解析的,所以放在上面可能会找不到控件. 3.JS的特点: 脚本编程语言 基于对象的语言 由事件驱动 跨平台.依赖于浏览器.与操作环境无关 4.JS的作用: 表单的验证(放在客户端验证比较好)----可以减轻服务端的压力,并且用户体验感更好 页面的动态效果 动态改变页面的内容

高性能javascript学习笔记系列(1) -js的加载和执行

这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令的过程,这个过程就会带来一定的性能损耗,所以在js中做性能的优化是必须的 javascript的阻塞特性:浏览器在执行js代码的时候,不能做其他的任何事情,因为浏览器使用单一的进程来处理用户界面的刷新和javascript的脚本执行,也就是说什么时候执行js脚本影响着用户对页面的使用体验(之所以js

笔记-[5]-关于JS事件流!

一般的事件流中有两种:一是事件捕获 二是事件冒泡 事件冒泡的理解:何谓冒泡,当水开的时候,水珠不断地向上冒的过程.在JS中同样如此.在DOM中是一种树型的结构. 如:window document html body span 例如span标签绑定了一个onclick事件.在没有阻止冒泡事件的时候,当span发生onclick事件时,body,html,document,window同样会触发onclick事件(前提是这个几个祖先标签绑定了onlick事件),否则是看不出效果. 事件捕获很少用到

JS DOM编程艺术——JS图片库2—— JS学习笔记2015-7-9(第80天)

childNodes属性: element.childNodes 它是包含这个元素的全部子元素的数组: nodeType属性: 每一个节点都有nodeType属性,这个属性可以让我们知道自己正在与哪种节点打交道 node.nodeType 返回 1 是指该节点为元素节点: 返回 2 是指该节点为属性节点: 返回 3 是指该节点为文本节点: nodeValue属性: node.nodeValue 但是这个属性在实际使用的时候需要配合childNodes才行,详情看例子 firstChild和las

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

DOM是一种适用于多种环境和多种程序设计语言的通用型API. 如果想要把本书(JS DOM编程艺术)学到的DOM技巧运用在web浏览器以外的应用环境里,严格遵守“第1级DOM”能够让你避免与兼容性有关的任何问题: tips:setAttribute是第1级DOM; 图片切换初级js: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/

CSS和Js笔记

什么是css,为什么使用css. CSS 是 Cascading Style Sheet 的缩写.译作「层叠样式表单」. 是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. html只能做基本的页面显示,而我们想要让页面美化,必须通过css对页面进行修饰. 示例:在页面上显示一句话. 传智播客. 怎样使用css 1.html与css的结合. 1.所有的html标签都具有一个style属性.这个属性就是用来定义css <span style="font-size:10

Node.js笔记(0003)---Express框架Router模块学习笔记

这段时间一直有在看Express框架的API,最近刚看到Router,以下是我认为需要注意的地方: Router模块中有一个param方法,刚开始看得有点模糊,官网大概是这么描述的: Map logic to route parameters. 大概意思就是路由参数的映射逻辑 这个可能一时半会也不明白其作用,尤其是不知道get和param的执行顺序 再看看源码里面的介绍: Map the given param placeholder `name`(s) to the given callbac

js子窗口操作父窗口的标签

======================================父窗体 <input id="aaaa" type="button"/> function upfile()         {                         resultValue = window.showModelessDialog("ceshi.aspx?file=DownFile", window, "dialogWidt

node.js笔记——模块的开发

模块是什么? 简单来说模块是用来将实现某个功能的代码进行封装以便在其他项目中通过简单引入的方式实现模块中封装的功能的一个东西!!(我更想管他叫小程序). 模块的引入 模块的引入使用reqiure()函数来实现例如引入http模块 var h = require("http"); 这里需要注意的是require()加载函数可以加载指定的js文件,当引入的不是某个js文件而是一段没有扩展名的字符时,默认node.js会加载当前根目录下的node_modules文件夹下面的文件夹里的文件 并