h5 页面点击添加添加input框

前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的

效果图,加号增加,减号减少

直接上代码, 用来bootstrap的组件

div部分

<div class="container col-md-8" style="margin:100px">
<form id="mom" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">url</label>
<div class="col-sm-10">
<input id="url" type="text" class="form-control" name="url">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">url1</label>
<div class="col-sm-10">
<input id="url1" type="text" class="form-control" name="url1">
</div> </div> <div id="1" class="form-group">
<label class="col-sm-2 control-label"> 字段1 </label>
<div class="col-sm-10">
<input type="text" id="key0" value="">
<input type="text" id="val0" value="">
<input id="add" type="button" value="+">
<input id="pop" type="button" value="-">
</div>
</div> </form>
<button id="send_mm" class="btn btn-default" style="margin-left:150px">Button</button>
</div>

js 部分

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script> var num = 0;
var data1 = {}; $("input[id='add']").click(add);
$("input[id='pop']").click(pop);
$("button[id='send_mm']").click(send_urll);
var momEle = document.getElementById("mom"); function add() {
num++;
console.log(num); var divEle = document.createElement("div");
divEle.setAttribute("class", "form-group");
divEle.setAttribute("id", `${num}`);
var inner = `<label class="col-sm-2 control-label"> 字段 ${num} </label> <div class="col-sm-10"> <input type="text" value="" id="key${num}"> <input type="text" value="" id="val${num}" </div>`;
divEle.innerHTML = inner;
alert(divEle.innerHTML); momEle.appendChild(divEle); } function pop() {
if (num != 0) {
var current_dom = document.getElementById(`${num}`); momEle.removeChild(current_dom); num--
} else {
alert('最少有一个字段')
} } function send_urll() { for (i = 0; i <= num; i++) {
var k = "key" + i;
var v = "val" + i;
var key = document.getElementById(`${k}`).value;
var val = document.getElementById(`${v}`).value;
// console.log(document.getElementById(`${k}`).value,document.getElementById(`${v}`).value); data1[key] = val }
console.log(data1); var url = document.getElementById('url').value;
var url1 = document.getElementById('url1').value; $.ajax({
url: "/get_url/",
type: "POST",
data: {"url": url, "url1": url1, "data1":JSON.stringify(data1)},
success: function (data) {
alert(JSON.parse(data));
data1 = {}
}
}) } </script>

就是简单的dom操作,添加时增加div标签,难点在于每个input要有自己的key,当时还遇到一个坑

就是拼接的时候要用(`),不能用(')("), 这是es6的新语法

附上大佬博客的链接

https://www.cnblogs.com/liwenzhou/p/9249932.html#autoid-2-2-1

h5 页面点击添加添加input框的更多相关文章

  1. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  2. js-禁止微信H5页面点击右上角菜单时出现“复制链接”,且分享仅支持微信分享

    禁止微信H5页面点击右上角菜单时出现“复制链接”,这个问题已经影响到我很久很久了,起码有2年了, 昨天写H5活动的时候,需求有一个是:可分享,但是禁止复制活动链接, 这一下,就逼我务必好好研究研究了. ...

  3. 移动端开发H5页面点击按钮后出现闪烁或黑色背景的解决办法

    H5页面在IOS端测试的时候发现,点击按钮会闪动,出现一个黑色的背景一闪而过,影响用户体验.最后通过度娘,找到解决方法: 就是给点击的元素添加一个CSS属性或者全局添加一个css. -webkit-t ...

  4. 解决H5页面点击一瞬间出现灰色背景的问题

    H5页面有时会出现点击一瞬间出现灰色背景的问题(ios会,安卓不会),解决方法: 加上样式: -webkit-tap-highlight-color: transparent; 如果以上方法不行,则是 ...

  5. scrollReveal.js导致页面加载完之后页面中点击事件添加的css参数失效了(我的Hexo next博客引发的问题)

    文章目录 时间 背景 问题解决 个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 时间 2019 ...

  6. 移动端h5页面的那些坑

    最近一直在写移动端页面,由于之前写移动端写的比较少,所以此次踩过许多坑.特此总结一下: 1.<input type='button'>背景色在ios中的兼容性,颜色发白 解决办法:在全局样 ...

  7. 吐血bug-- 多个input框接连blur事件导致alert接连弹出

    本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...

  8. H5页面怎么跳转到公众号主页?看过来

    前言: 做公众号开发的小伙伴,可能会遇到这种需求: 在一个H5页面点击一个关注公众号按钮跳转到公众号主页. 听到这个需求的一瞬间,疑惑了!这不可能! 摸了摸高亮的额头!没办法,做还是要做的 开始上解决 ...

  9. h5页面添加背景音乐

    [需求]h5页面添加背景音乐,支持微信.QQ.各种APP. [实现思路]1.通过audio标签,设置自动播放,是一种方法,但是此方法只适合微信.QQ,并不兼容我司的APP,需要主动触发下播放事件. 2 ...

随机推荐

  1. 记录GOPATH在GOLAND中的坑

    首先我的环境已配置好: GO的目录结构是: add.go package calc//函数名必须大写首字母,不然外部包找不到 func Add(a int,b int)(int){ return a+ ...

  2. firstpage 2015/5/21

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="firstPage.aspx ...

  3. web应用安全权威指南(文摘)

    第1章 什么是web应用的安全隐患 第3章 Web安全基础,HTTP,会话管理,同源策略 content_length 字节数 content_type mime类型 百分号编码 referer :请 ...

  4. Multi-Sensor, Multi- Network Positioning

    Ruizhi Chen, Heidi Kuusniemi, Yuwei Chen, Ling Pei, Wei Chen, Jingbin Liu, Helena Leppäkoski, Jarmo ...

  5. WebApi 插件式构建方案:IOC 容器初始化

    body { border: 1px solid #ddd; outline: 1300px solid #fff; margin: 16px auto; } body .markdown-body ...

  6. 使用Docker、CoreOS、Mesos部署可扩展的Web应用

    [编者的话]本文作者重点介绍了如何使用Docker.CoreOS.Mesos.Vulcand.对象存储来部署一个可扩展的Web应用,他首先介绍了为什么要选择这些工具以及与其它工具相比这些工具的优势.紧 ...

  7. Docker 入门笔记

    Docker 可以理解为一个轻量化的虚拟机, 启动速度快,本身占的资源小 [重要], 容器里是不能保存数据的,容器只要一停止, 所有的数据都会丢失,所以如果重要的数据, 都需要通过配制,把数据保存在 ...

  8. 日笔记--C# 从数据库取表格到DataGridView---json传输

    只作为个人学习笔记. class OpData { // 创建一个和客户端通信的套接字 Socket socketwatch = null; //连接Access字符串 string strCon; ...

  9. 虚拟化 - VMware

    和VirtualBox一样,也需要关掉Hyper-V才能启动虚拟机,否则会报Guard的错误. 网络 [转]VMware网络连接模式-桥接.NAT以及仅主机模式的详细介绍和区别 桥接 就好像在局域网中 ...

  10. 部署网络存储ISCSI

    1.什么是ISCSIInternet Small Computer System Interface 互联网小型计算机接口技术,是一种将SCS存储与以太网技术相结合,可以用来在互联网中传输SCSI接口 ...