使用jquery点击添加新的input（双层添加）

最新推荐文章于 2021-12-07 13:29:08 发布
最新推荐文章于 2021-12-07 13:29:08 发布
阅读量962 收藏 2
点赞数 1
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46390461/article/details/108244764
版权

使用jquery点击添加新的input（双层添加）


最近在一个项目中遇到下面的一种情况：
在这里插入图片描述
当点击添加问题时要把下面整个表单添加一个
在这里插入图片描述
在点击添加是要把表单中的答案框添加一个
在这里插入图片描述
在添加过程中很容易造成当我点击添加 每个表单中都会添加，现在我们要做的就是给每个表单添加一个标识，每次添加都会添加在这个标识下面
在这里插入图片描述

到这里添加问题的功能已经完成，下面写添加表单中的答案框

在这里插入图片描述
到此功能已经全部完成
在这里插入图片描述

最后附上获取表单数据的代码
在这里插入图片描述
在这里插入图片描述

前端小青蛙
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现表单动态添加数据并提交的方法
10-18
主要介绍了jQuery实现表单动态添加数据并提交的方法,结合实例形式总结分析了jQuery针对存在form表单的添加、提交,不存在form表单的添加、提交,ajax、非ajax形式提交等数据添加与表单提交操作技巧,需要的朋友可以参考下
使用jquery动态增加删除input框
jianchenn的博客
04-24 1916
使用jquery增加删除input元素 将input输入内容加上限制 οninput=“value=value.replace(/[^\d|xX]/g,’’)” 身份证格式验证 或者 $(’#card’).attr(“oninput”, “this.value=this.value.replace(/[^0-9|xX]/g,’’);”); id为card的input框输入限制为this.value...
JQuery点击按钮新增input框
小伙伴们全都Lucky！
09-02 2537
1.正常状态 2.点击添加 3. 点击添加的input框后面的添加按钮 4.点击按钮刷新规则下方表格会弹出各个排列组合，价格可以修改 5.上代码 <div class="videobox" style="margin-left:-12px;"> <label class="layui-form-label" style="width: 90px;">商品规格</label> ...
jQuery动态添加input框
热门推荐
qq_39503366的博客
07-27 1万+
bootstrap和jQuery实现 实现效果如下： 点击加号进行添加，点击减号删除行，鄙人前端技术不太好，头铁写的 HTML代码如下： <div id="index-div"> </div> HTML代码其实就是个div盒子，也可以给一个初始化的文本框 重头是js的代码： 进入页面： $(function () { var...
html input追加输入,Jquery动态添加输入框
weixin_35909238的博客
05-31 1693
jquery 动态添加输入框的两种方法。1.展示页面动态添加输入框动态添加输入框第一种组件封装第二种简单的实现方式$(function() {$('.input-group-add').initInputGroup({'widget' : 'input', //输入框组中间的空间类型/*'add' : '添加','del' : '删除',*/'field': 'data','data' : ['2...
Jquery 实现动态添加输入框&编号
weixin_34309543的博客
03-15 651
输入框动态增加和删除并重新编号： 代码附上： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加元素</title> <script src="jquery-3.3.1.js">&...
jQuery实现动态添加、删除按钮及input输入框的方法
10-19
主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
jQuery点击添加快捷留言表单代码
06-10
**jQuery点击添加快捷留言表单代码详解** 在网站设计中，提供用户友好的交互体验是至关重要的。"jQuery点击添加快捷留言表单代码"是一种高效的方法，它允许用户快速便捷地在联系我们页面提交意向留言。这个功能通过...
jQuery点击添加更多图片瀑布流代码
04-07
在本文中，我们将深入探讨如何使用jQuery实现一个点击添加更多图片的瀑布流布局。瀑布流布局，也称为Masonry布局，是一种流行的设计模式，常用于展示图片或内容，使得页面在不同屏幕尺寸下都能保持良好的视觉效果。...
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
10-22
在本文中，我们将探讨如何基于Bootstrap框架使用jQuery实现输入框组input-group的添加与删除功能。Bootstrap是一个流行的前端开发框架，它提供了丰富的UI组件，其中包括输入框组(input-group)，用于构建复杂的表单...
jQuery点击标签添加到面板代码
06-24
最后，为了使关闭按钮能正常工作，我们需要为它们添加点击事件监听器： ```javascript $('#tagPanel').on('click', '.close', function() { $(this).parent().remove(); }); ``` 这样，当用户点击面板上的标签...
Jquery动态添加input和删除input
huaxia430的博客
11-07 1251
需求：输入多个游戏名称和游戏链接 实现：jquery 的append（）和remove()方法
利用jQuery实现表单里的增加、删除和修改
zry2580的博客
03-23 6102
这周老师教了怎么利用jQuery实现在表单里增加、删除和修改数据。可以增加数据，单选删除、多选删除和全选删除。ISBN的值式唯一的，不能重复，当输入的ISBN已存在，就只修改后面书名。效果图如下： 整体代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&...
Jq 动态追加并获取多个form表单的数据
Unknowncheats的博客
07-29 730
效果图 需求：有的时候用户根据不同需要添加多个表单，但是不确定到底添加多少个，所以就需要使用jq实现动态添加多个表单了，也可以删除 解决方法：系统默认给两个form表单，每一个表单都是一个form，而不是两行共用一个form，动态添加的时候点击左上角“添加”按钮，追加的是一个单独的form，每行都是一个form的好处是可以使用serialize序列化单独获取每个form表单的数据，这样前端容易获取，后台也容易处理。 代码： <!DOCTYPE html> <html...
ajax不同多表单提交,使用ajax和jquery进行多表单提交
weixin_34493827的博客
08-06 386
3 个答案:答案 0 :(得分：1)你确定两张表格都没有提交吗？查看您的代码，看起来它们都是由该功能提交的。 javascript是异步的，所以第二个表单将在第一个表单之后提交，而不是等待第一个表单完成。如果您想按顺序提交，则必须执行此操作：function jqsub() {jqsub1();function jqsub1() {//Form 1var $form = $('#catwebfor...
html5表单增删查改,jQuery对table表格进行增删改查
weixin_35896299的博客
06-20 714
最近要处理一些前端的工作，重新学习了一下jQuery，感觉还是那么的锋利啊！！！总结了一下对table的增删改查，写一篇留着以后自己recode。1.首先我自己写了一个简单的div布局。2.实现几个用标签做的按钮的功能 分别是新增 修改 删除 查询和返回。代码如下html+css(原谅我写在一起吧。。毕竟渲染不是我的强项)测试数据table, td{font:100% '微软雅黑';}table{...
jquery 动态增加，减少input表单的方法
零风の后花园
08-19 1万+
html代码如下 js代码如下 var max_fields = 5; //maximum input boxes allowed var wrapper = $(".input_fields_wrap"); //Fields wrapper var add_button =(".add_field_button"); /
JQuery动态添加input控件并取值
qq_42799116的博客
12-07 1960
JQuery动态添加input控件并取值
JQUERY form append input
百胜_Minco的博客
03-29 2196
var $form=$('#form');var $zzinput=$('&lt;input type="hidden" name="zz"  value="0"   /&gt;');var $ysinput=$('&lt;input type="hidden" name="ys"  value="1"   /&gt;');$form.append($zzi
使用jquery动态添加input框，监听其输入结果
最新发布
05-26
你可以使用以下代码实现： HTML部分： ```html <div id="input-container"> <button id="add-input-btn">添加输入框</button> </div> ``` JavaScript部分： ```javascript $(function() { var container = $('#input-container'); var addBtn = $('#add-input-btn'); var inputIndex = 0; addBtn.click(function() { var input = $('<input>').attr({ type: 'text', name: 'input-' + inputIndex }); container.append(input); inputIndex++; input.on('input', function() { var inputValue = $(this).val(); console.log('输入框值为：' + inputValue); }); }); }); ``` 这段代码会监听添加的每个输入框的输入事件，并在控制台打印输入框的值。每当点击“添加输入框”按钮时，就会添加一个新的输入框。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值