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 ...
随机推荐
- J.U.C 整体认识
深入浅出 Java Concurrency (1) : J.U.C的整体认识 去年年底有一个Guice的研究计划,可惜由于工作“繁忙”加上实际工作中没有用上导致“无疾而终”,最终只是完成了Guice的 ...
- leetcode131
深度优先遍历(DFS),先判断前一个部分是否是回文,如果是,则将其加进集合中,然后继续判断后面的回文串. 在回溯的时候,将之前加入集合的串删除,重新选择回文串.每到达一次叶子节点,得到一组结果. pu ...
- 文本操作 $(..).text() $(..).html() $(..).val()最后一种主要用于input
文本操作: $(..).text() # 获取文本内容 $(..).text('<a>1</a>') # 设置文本内容 $(..).html() $(..).html('< ...
- STL string 常用函数（转）
string类的构造函数: string(const char *s); //用c字符串s初始化 string(int n,char c); //用n个字符c初始化 此外,string类还支持默认构造 ...
- Apache HBase 集群安装文档
简介: Apache HBase 是一个分布式的.面向列的开源 NoSQL 数据库.具有高性能.高可靠性.可伸缩.面向列.分布式存储的特性. HBase 的数据文件最终落地在 HDFS 之上,所以在 ...
- 新手C#int.Parse、int.TryParse的学习2018.08.04
int.Parse()用于将字符串转换为32为int类型,但是在遇到非数字或者类似1.545这种小数的时候会报错,后来采用了int.TryParse,这个在转换后会判断是否可以正常转换,若不能,会返回 ...
- UnityEngine.SerializeField & System.Serializable
[UnityEngine.SerializeField] Force Unity to serialize a private field. 强制Unity序列化一个私有变量. You will al ...
- input checkbox 复选框大小修改
设置zoom属性(放大) 利用style: <input type="checkbox" name="returnfee" style="zo ...
- svn版本分支及冲突解决笔记
转载:http://blog.csdn.net/xuguiyi100/article/details/51966557 分支合并主干示例 1.主干工程右键选择merge合并下一步 2.选中merge ...
- 事务传播性、隔离性与MVCC
一.事务传播性 1.1 什么是事务的传播性 事务的传播性一般在事务嵌套时候使用,比如在事务A里面调用了另外一个使用事务的方法,那么这俩个事务是各自作为独立的事务执行提交,还是内层的事务合并到外层的事务 ...