jQuery--修改表单数据并提交

最新推荐文章于 2024-05-15 16:01:44 发布
最新推荐文章于 2024-05-15 16:01:44 发布
阅读量1k 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/daliangtou/p/5205281.html
版权
目的：

​点击‘编辑’，弹出对话框，修改数据。

主要知识点：

prevAll()，获取同级别本元素前面的所有元素。

代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title ></ title >
     < style >
         .modal{
             position: fixed;
             left:50%;
             top: 50%;
             width: 400px;
             height: 300px;
             background-color: #DDDDDD;
             margin-left: -200px;
             margin-top: -150px;
         }
         .hide{
             display: none;
         }
     </ style >
</ head >
< body >
     < table border = "1" >
         < thead ></ thead >
         < tbody >
             < tr >
                 < td >h1</ td >
                 < td >192.168.1.1</ td >
                 < td >111</ td >
                 < td onclick = "GetPrev(this)" >编辑</ td >
             </ tr >
         <!--1.弹出框-->
         <!--2.取出表格数据-->
         <!--3.将数据填充到弹出框-->
             < tr >
                 < td >h2</ td >
                 < td >192.168.1.2</ td >
                 < td >222</ td >
                 < td onclick = "GetPrev(this)" >编辑</ td >
             </ tr >
             < tr >
                 < td >h3</ td >
                 < td >192.168.1.3</ td >
                 < td >333</ td >
                 < td onclick = "GetPrev(this)" >编辑</ td >
             </ tr >
         </ tbody >
     </ table >
     < div id = "dialog" class = "modal hide" >
         < form action = "" method = "get" >
             < p >主机名：< input type = "text" id = "hostname" /></ p >
             < p >IP：< input type = "text" id = "ip" /></ p >
             < p >端口：< input type = "text" id = "port" /></ p >
             < input type = "submit" value = "提交" onclick = "return SubmitForm()" >
             <!--当onclick返回false，submit不进行提交。-->
             < input type = "button" value = "取消" onclick = "Cancel()" >
         </ form >
     </ div >
     < script type = "text/javascript" src = "jquery-2.1.4.min.js" ></ script >
     < script type = "text/javascript" >
         function GetPrev(arg){
             var list=[];
             $.each($(arg).prevAll(),function(i){
                 var item=$(arg).prevAll()[i];
                 //this
                 var text=$(item).text();
                 list.push(text);
             });
             var new_list=list.reverse();
             //在弹出框的hostname中设置值
             $('#hostname').val(new_list[0]);
             $('#ip').val(new_list[1]);
             $('#port').val(new_list[2]);
 
             $('#dialog').removeClass('hide');
         }
         function SubmitForm(){
             //获取form表单中的input值，判断是否为空；
             var ret=true;
             //遍历所有的input["type=text"]，只要有空值，就将ret设置为false；
             $(':text').each(function(){
                 //$(this)=要循环的每一个元素
                 var value=$(this).val();
                 if(value.trim().length==0){
                     $(this).css('border-color','red');
                     alert("不能为空");
                     ret=false;
                 }else{
                     $(this).css('border-color','green');
                 }
             });
             return ret;
         }
         function Cancel(){
             $('#dialog').addClass('hide');
         }
     </ script >
</ body >
</ html >
效果：​

827870-20160221173902733-218720465.png


















转载于:https://www.cnblogs.com/daliangtou/p/5205281.html

weixin_30367945
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery 构造函数在表单提交过程中修改数据
12-11
先贴代码 [removed] function appendText(){ var content = $("#textarea").val(); var new_content = content + "wap"; $("#textarea").attr("value",new_content); }; [removed]  然后再在 form 表单进行提交时候 <form onsubmit="appendText();" >  然后在后台查看数据美容，就会对应的加上相应的字符 以上所述就是本文的全部内容了，
JQuery 在表单提交之前修改 提交的值 原创
11-23
为了解决这个问题，我们可以使用jQuery来动态地在表单提交前检查并修改用户输入的关键字。 首先，我们需要监听表单的提交事件。在jQuery中，我们可以使用`submit`事件来实现这一功能。以下是一个简单的示例代码： ...
jQuery给表单设置值
u011927449的博客
05-27 398
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function () { $("input.
jQuery（二）修改元素、查找元素_jquery修改元素内容
最新发布
2401_84572577的博客
05-15 347
Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照下面的知识点去找对应的学习资源，保证自己学得较为全面。工具都帮大家整理好了，安装就可直接上手！当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。观看全面零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。
jQuery修改form表单提交及action值
BestEternity的博客
08-07 4112
例： <form id="myform" method="get" target="_blank" action="/doSet/"> <input type="text" id="username"> <input type="button" id="button" value="提交"> </form> 分析： 表单是以 "get" 提交方式，id 为 "myform" 的一个表单。"/doSet/" 提交地址为根域名下，"_bl.
简单的 jquery控制表单提交
乐逍遥
07-21 472
有种情况，我们要提交我们的表单前，需要通过js进行对数据的验证，这时候怎么办呐？ 这种情况 解决办法是很简单的。不需要任何的Form空间，只需要jquery自带的.submit()方法可以了
jquery fom表单提交前修改其值
CatFish
04-22 1182
&lt;form action="${ctx}/edie/test.htm" method="post" id="edie"&gt; &lt;div class="adminCon boxShadow"&gt; &lt;div class="adminMain boxShadow"&gt; &lt
form表单提交，jquery-form.js
06-08
在前端开发中，`form`表单是网页交互的核心组件，用于收集用户输入的数据并将其发送到服务器进行处理。`jQuery-form.js`是一个流行的JavaScript插件，它扩展了`jQuery`库的功能，使得表单的提交、上传和处理变得更加...
jQuery-Form:jQuery 表单插件，版本
06-28
通过使用Ajax，用户可以在不刷新整个页面的情况下发送表单数据到服务器，提供更好的用户体验。例如，你可以使用`ajaxForm()`或`ajaxSubmit()`方法轻松地将任何表单转换为异步提交。 ```javascript $("#myForm")....
jQuery-分步骤网站用户注册表单模板
06-08
当所有步骤都完成并且验证无误后，我们可以使用Ajax来异步提交表单数据，避免页面刷新。`.ajax()`方法可以发送HTTP请求，处理响应，并在成功时调用回调函数，通常会显示注册成功的消息。 5. **错误处理** 在整个...
js获取表单提交的数据并修改其他表单笔记
ITfinder
05-29 587
首先在提交按钮上面加入一个点击事件   onclick="fun();  然后在 &lt;script type="text/javascript"&gt; function fun(){ var jine=parseInt(document.getElementById("ckje").value); var lixi=jine*3.25/100; var benxi=l...
jquery动态改变form属性提交表单
10-25
在js中动态改变form的属性，满足不同条件的form提交需求，下面有个不错的示例，大家可以参考下
javascript通过jquery获取表单元素/控件值和设置值的方法
liaomingwu的专栏
03-15 1536
javascript通过jquery获取表单元素/控件值和设置值的方法
jquery.form插件中动态修改表单数据
u011277123的博客
01-09 4144
大龄菜鸟 2017-01-07 10:37 jquery.form jquery.form插件（http://malsup.com/jquery/form/）是大家经常会用到的一个jQuery插件，它可以很方便将表单转换为ajax的方式进行提交。以下是官网给出的一个栗子： $(document).ready(function() { var options = { t
基于jquery做的一个弹窗效果
记录每天的点点滴滴
02-21 178
初学javascript，就想动手重写下alter和confirm，自带的真的太丑了,刚看了javascript oo写法,就想着模仿一下,直接上代码 [code="java"]//消息对话框 var MessageBox = (function () { var Msg = { baseUrl: "", //初始化函数 in...
JQuery实现表格点击就可以修改
u012452488的专栏
11-19 5455
我们看到有些网站表格内容点击就可以直接修改，修改完后，点击回车键就能将修改内容显示成表格内容，最经典的例子：QQ签名，不点击时候看着是一段文字，点击后就能输入，点击编辑个性签名就能出现能够输入的文本框。所以在页面中也做一个这种效果的表格    思想：给表格td注册一个onclick事件，当点击时候记住文本内容，并且将td表格编程一个输入的文本框，并且文本框Value的值改成以前td内容，对文
表单信息修改提交
qq_24192465的博客
01-11 1581
" class="active">
js表单动态添加数据并提交
热门推荐
方全的专栏
03-23 2万+
https://www.cnblogs.com/hujunzheng/p/5069798.htmlv情景1：已经存在form对象了，动态为form增加对象并提交function formAppendSubmit(){        var myform=$('#newArticleForm'); //得到form对象        var tmpInput=$("&lt;input type=...
jquery批量设置和获取表单数据
風缘的博客
06-15 1698
大家在提交表单和给表单赋值的时候是像下面这样写的： 要是表单很长的话真是要泪奔。。。 有人说获取数据可以给jquery添加serializeObject方法： ** * 表单序列化为json对象 * 用法：var savaData = $('#Form').serializeObject(); */ $.fn.serializeObject = function () { ...
ajax提交Form表单数据到后台
06-06
其中，`url` 参数指定了提交表单数据的 URL，`type` 参数指定了提交表单数据的方法（这里使用了 POST 方法），`data` 参数指定了要提交的表单数据，`success` 参数指定了提交成功后的回调函数，`error` 参数指定了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值