MVC中用jQuery加BootStrap实现动态增加删除文本输入框!

时间:2022-04-22 16:34:16

http://www.freejs.net/article_biaodan_278.html

这是在网上找到方法,我修改了一下实合我的项目,发博只为收藏记录并加深记忆。

修改后效果如下

MVC中用jQuery加BootStrap实现动态增加删除文本输入框!

@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">
&times;
</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>