使用jquery修改表单的提交地址基本思路


Posted in Javascript onJune 04, 2014

基本思路:

通过使用jquery选择器得到对应表单的jquery对象,然后使用attr方法修改对应的action

示例程序一:

默认情况下,该表单会提交到page_one.html

点击button之后,表单的提交地址就会修改为page_two.html

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jquery test</title> 
<script src="jquery-1.11.1.min.js"></script> 
</head> <body> 
<div> 
<form action="page_one.html" id="qianshou"> 
<input type="text"/> 
<input type="submit" value="提 交"/> 
</form> 
</div> 
<div> 
<button name="update">修改form的提交地址为page_two.html</button> 
</div> 
</body> 
<script> 
var $fun = $('button[name=update]'); 
$fun.click(function(){ 
$('form[id=qianshou]').attr('action','page_two.html'); 
}); 
</script> 
</html>

示例程序二:

form本来的action地址是page_one.html,通过jquery直接修改为page_two.html

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jquery test</title> 
<script src="jquery-1.11.1.min.js"></script> 
</head> <body> 
<div> 
<form action="page_one.html" id="qianshou"> 
<input type="text"/> 
<input type="submit" value="提 交"/> 
</form> 
</div> 
</body> 
<script> 
$('form[id=qianshou]').attr('action','page_two.html'); 
</script> 
</html>
Javascript 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
Vue父子组件之间的通信实例详解
Sep 28 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
jQuery操作元素css样式的三种方法
Jun 04 #Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 #Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 #Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 #Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 #Javascript
动态读取JSON解析键值对的方法
Jun 03 #Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 #Javascript
You might like
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
用PHP编写PDF文档生成器
2006/10/09 PHP
怎样在php中使用PDF文档功能
2006/10/09 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Python第三方库的安装方法总结
2016/06/06 Python
Python装饰器用法示例小结
2018/02/11 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
python3 re返回形式总结
2020/11/20 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
班主任评语大全
2014/04/26 职场文书
大学生求职信范文
2014/05/24 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
2016年少先队活动总结
2016/04/06 职场文书
Java Spring Lifecycle的使用
2022/05/06 Java/Android