使用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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
微信小程序 教程之模板
Oct 18 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
使用JS获取SessionStorage的值
Jan 12 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 session常见问题集锦及解决办法总结
2007/03/18 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
python实现逻辑回归的方法示例
2017/05/02 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python的继承知识点总结
2018/12/10 Python
Python实现某论坛自动签到功能
2019/08/20 Python
python 实现return返回多个值
2019/11/19 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
python scatter函数用法实例详解
2020/02/11 Python
pycharm的python_stubs问题
2020/04/08 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
英国高街电视:High Street TV
2018/05/22 全球购物
水污染治理专业毕业生推荐信
2013/11/14 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
环境科学专业求职信
2014/08/04 职场文书
师德师风剖析材料
2014/09/30 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
歌剧魅影观后感
2015/06/05 职场文书
四大名著读书笔记
2015/06/25 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
幼儿园保育员随笔
2015/08/14 职场文书