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 ...
随机推荐
- Pthreads 信号量，路障，条件变量
▶ 使用信号量来进行线程间信息传递 ● 代码 #include <stdio.h> #include <pthread.h> #include <semaphore.h& ...
- centos7上mysql无法启动也没有日志
报错的原因就是 [root@localhost duanxinli]# journalctl -xe-- Subject: Unit mysqld.service has begun start-up ...
- Rhythmk 一步一步学 JAVA (22) JAVA 网络编程
1.获取主机信息 @Test public void GetDomainInfo() throws UnknownHostException { String domain = "www.b ...
- 在WebBrowser中发送POST请求
我们要用到的也是WebBrowser的“Navigate”方法,其函数原型如下所示: Sub Navigate(URL As String, [Flags], [TargetFrameName], [ ...
- 安装wget
今天给服务器安装新LNMP环境时,wget 时提示 -bash:wget command not found,很明显没有安装wget软件包.一般linux最小化安装时,wget不会默认被安装. 可以通 ...
- 01c-1: 主流长远
- python大规模数据处理技巧之一：数据常用操作
面对读取上G的数据,python不能像做简单代码验证那样随意,必须考虑到相应的代码的实现形式将对效率的影响.如下所示,对pandas对象的行计数实现方式不同,运行的效率差别非常大.虽然时间看起来都微不 ...
- 输入输出参数 inout
输入输出参数 inout 函数参数默认是常量.试图在函数体中更改参数值将会导致编译错误(compile-time error).这意味着你不能错误地更改参数值.如果你想要一个函数可以修改参数的值,并且 ...
- 323. Number of Connected Components in an Undirected Graph按照线段添加的并查集
［抄题］: Given n nodes labeled from 0 to n - 1 and a list of undirected edges (each edge is a pair of n ...
- 282 expression and operations添加运算符
［抄题］: 给定一个仅包含数字 0 - 9 的字符串和一个目标值,返回在数字之间添加了 二元 运算符(不是一元)+, - 或 * 之后所有能得到目标值的情况. "123", 6 - ...