MVC中用jQuery加BootStrap实现动态增加删除文本输入框！
http://www.freejs.net/article_biaodan_278.html
这是在网上找到方法，我修改了一下实合我的项目，发博只为收藏记录并加深记忆。
修改后效果如下
@model PwtsWeb.Models.PhoneNum
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<title>UserAdd</title>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal show" id="userAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
新增用户信息
</h4>
</div>
<div class="modal-body">
@using (Html.BeginForm("UserAdd", "PhoneBook", FormMethod.Post))
{ <div class="form-group">
<label>单位/姓名</label>
@Html.TextBoxFor(c => c.UserInfo.Name, new { @class = "form-control input-sm" })
</div>
<div class="form-group">
<label>电话</label> <div id="telNum" class="input-group">
@Html.TextBoxFor(c => c.Tel, new { @class = "form-control input-sm" })
<span class="input-group-btn">
<button id="addNum" class="btn btn-default btn-sm" type="button">+</button>
</span>
</div><!-- /input-group --> </div> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
关闭
</button>
<button type="button" class="btn btn-primary">
保存
</button> </div> } </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div> <script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script> <script>
$(document).ready(function () {
var MaxInputs = 8; //maximum input boxes allowed
var InputsWrapper = $("#telNum"); //Input boxes wrapper ID
var AddButton = $("#addNum"); //Add button ID var x = InputsWrapper.length; //initlal text box count
var FieldCount = 1; //to keep track of text box added $(AddButton).click(function (e) //on add input button click
{
if (x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).after('<div id="telNum" class="input-group">@Html.TextBoxFor(c => c.Tel, new { @class = "form-control input-sm" })<span class="input-group-btn"><button id="removeNum" class="btn btn-default btn-sm" type="button">-</button></span></div>');
x++; //text box increment
}
return false;
}); $("body").on("click", "#removeNum", function (e) { //user click on remove text
if ( x > 1 ) {
$(this).parent().parent('div').remove(); //获取当前元素的父元素的父元素的DIV并删除
x--; //decrement textbox
}
return false;
})
});
</script>
</body>
</html>
MVC中用jQuery加BootStrap实现动态增加删除文本输入框！的更多相关文章
- JS动态增加删除UL节点LI
JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...
- Hadoop 2.6.3动态增加/删除DataNode节点
假设集群操作系统均为:CentOS 6.7 x64 Hadoop版本为:2.6.3 一.动态增加DataNode 1.准备新的DataNode节点机器,配置SSH互信,可以直接复制已有DataNode ...
- Repeater 动态增加删除一行
文章参考:文章参考http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html 效果: 前台代码: <%@ Page La ...
- jquery validate 动态增加删除验证规则（转载）
页面加载完成初始化form validate $("#user_regForm").validate({ errorPlacement: function(error, eleme ...
- JQuery动态增加删除元素
<form action="" method="post" enctype="multipart/form-data"> < ...
- jquery validate 动态增加删除验证规则
增加规则示例: $('.class').rules('add',{ required: true, messages:{ required: '这是必填,请填写', } }); 删除规则示例: $(' ...
- wpf动态增加删除控件
我在xaml中定义了一个名字为morepictureWrapPan为WrapPanel,然后将控件添加在此WrapPanel中.由于要实现控件的删除功能,所以增加的textbox和button的名字都 ...
- table动态增加删除
基于网上代码修改实现动态添加表数据行 <!DOCTYPE html> <html lang="cn"> <html> <head> ...
- JS动态增加删除UL节点LI及相关内容示例
<ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);&quo ...
随机推荐
- Rhythmk 学习 Hibernate 08 - Hibernate annotation 关联关系注解
1.一对一 (One to One) 共三种情况: 1.1 主键共享 1.2 外键共享 1.3 中间表关联 1.1 code: @Entity public class arti ...
- sqlserver数据库导出成insert语句
点击数据库名称右键=========>任务========>生成脚本 一.表结构导出成sql语句 二.数据导出成sql语句
- JAVA程序中使用正则表达式
import java.util.regex.Matcher;import java.util.regex.Pattern; /** * @author Administrator 测试正则表达式 * ...
- 聊一下Python的线程 & GIL
再来聊一下Python的线程 参考这篇文章 https://www.zhihu.com/question/23474039/answer/24695447 简单地说就是作为可能是仅有的支持多线程的解释 ...
- 滑动窗口的中位数 · Sliding Window Median
［抄题］: 给定一个包含 n 个整数的数组,和一个大小为 k 的滑动窗口,从左到右在数组中滑动这个窗口,找到数组中每个窗口内的中位数.(如果数组个数是偶数,则在该窗口排序数字后,返回第 N/2 个数字 ...
- Entity Framework 6.0 对枚举的支持/实体添加后会有主键反回
实验 直接上代码,看结果 实体类 [Flags] public enum FlagsEnum { Day = , Night = } public class EntityWithEnum { pub ...
- 查找yum 安装目录
[root@DB-Server ~]# rpm -qa | grep -i mysql MySQL-server-advanced-5.6.20-1.rhel5 MySQL-client-advanc ...
- Java 设计模式系列（九）组合模式
Java 设计模式系列(九)组合模式 将对象组合成树形结构以表示"部分-整体"的层次结构.组合模式使得用户对单个对象的使用具有一致性. 一.组合模式结构 Component: 抽象 ...
- jdbc注册驱动 class.forName（）
从源码 D:\Javasoftware\MySql\mysql\mysql-connector-java-5.1.7\src\com\mysql\jdbc\Driver.java class.forN ...
- swoole多进程操作
多个任务同时执行 将顺序执行的任务,转化为并行执行(任务在逻辑上可以并行执行) 比如,我们要对已知的用户数据进行判断,是否需要发送邮件和短信,如果需要发送则发送. 不使用多进程时,我们首先判断是否发送 ...