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 ...
随机推荐
- MySQL查询结果写入到文件总结
Mysql查询结果导出/输出/写入到文件 方法一:直接执行命令: mysql> select count(1) from table into outfile '/tmp/test.txt'; ...
- Oracle 查询历史数据（转帖）
回复误删除数据信息. 1.执行 alter table table_name enable row movement; 2.执行 FlashBack table table_name to times ...
- 解决Linux下MySQL登录ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor)问题
两种方案: 一: 1.修改mysql配置文件:vim /etc/my.cnf 2.找到[mysqld]下添加 skip-grant-tables 配置 3.重启服务service mysqld res ...
- selenium webdriver——JS操作日历控件
一般的日期控件都是input标签下弹出来的,如果使用webdriver 去设置日期, 1. 定位到该input 2. 使用sendKeys 方法 比如 但是,有的日期控件是readonly的 比如12 ...
- requests接口测试——身份认证
当调用者访问接口时需要进行用户认证(用户名密码的登录),只有通过了认证才允许调用者访问接口. 1.基本身份认证 许多要求身份认证的web服务都接受HTTP Basic Auth.这是最简单的一种身份认 ...
- 6 MySQL--表--完整性约束
参考:https://www.cnblogs.com/alice-bj/p/8824693.html 完整性约束: http://www.cnblogs.com/linhaifeng/articles ...
- 再谈C#编码规范
编码规范是老生常谈的问题,现在再看代码规范可能不会再去在意变量,控件的命名方法等,而是更加关注代码的实用性. 首先我们要明白一下几点, 1.代码写出来除了让他跑起来还有个非常非常重要的作用是维护,因为 ...
- Bourne Shell：控制语句、条件判断、文本处理、常用命令
条件判断是一个程序获得智能的基础,而Bourne Shell脚本则通过命令 [ 来模拟大多数编程语言中的条件表达式. shell中支持的控制结构有: (1) if then else fi (2) f ...
- UNITY5 - fog
全局雾效在 window->lighting 的设置,可设置颜色和距离 注意摄像机的Rendering Path要选择Forward
- Linux下patch的制作和应用
转自:http://blog.chinaunix.net/u3/100239/showart_1984963.html 首先介绍一下diff和patch.在这里不会把man在线文档上所有的选项都介绍一 ...