使用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 相关文章推荐
Maps Javascript
Jan 22 Javascript
js 表单验证方法(实用)
Apr 28 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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中的use关键字概述
2014/07/23 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
php实现的生成排列算法示例
2019/07/25 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
JavaScript File分段上传
2016/03/10 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
详解vue 组件
2020/06/11 Javascript
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python使用代理ip访问网站的实例
2018/05/07 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
python中数据库like模糊查询方式
2020/03/02 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
护理实习自我鉴定
2013/12/14 职场文书
我的中国心演讲稿
2014/09/04 职场文书
质量整改通知单
2015/04/21 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
电台广播稿范文
2015/08/19 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js