从第一个字段动态更新表单字段
Updating form fields dynamically from field one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create League</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Loading Bootstrap -->
<link href="../dist/css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI Pro -->
<link href="../dist/css/flat-ui-pro.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico">
<script type='text/javascript'>
function addFields(){
var number = document.getElementById("member").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
container.appendChild(document.createTextNode("Team " + (i+1) +" Name"));
var input = document.createElement("input");
var newIn = '<input class="col-md-6"';
input.type = "text";
input.name = "member" + i;
input.class="form-control";
input.placeholder="Please enter the team name";
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
}
</script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.js"></script>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" align="left" href="#topContainer">
<img style="max-width:100px;margin-top:-7px;"
src="img/logo.png" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="#CMContainer">Recent Matches</a></li>
</ul>
</div>
</div>
</div>
<div class="container contentContainer">
<div class="row">
<div class="col-md-6">
<br>
<br>
<h4>Please enter the fields below</h3>
<div class="form-group">
<label for="noofteams">Number of Teams</label>
<input type="text" class="form-control" id="member" name="member" value=""placeholder="Enter number of teams"><br />
<a href="#" id="filldetails" class="btn btn-default" onclick="addFields()">OK</a>
<div id="container"/>
</div>
</div>
</div>
</div>
我正在尝试从第一个给定的输入动态更新第二个表单字段.我正在使用flatUI和bootstrap css文件。但是我无法像引导或平面UI那样更改生成的文本字段类型,它显示了一个基本的文本字段!好心有人帮我解决这个问题。谢谢
<!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
<script src="../dist/js/vendor/jquery.min.js"></script>
<script src="../dist/js/vendor/video.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../dist/js/flat-ui-pro.js">
<script>
$(".contentContainer").css("min-height", $(window).height());
</script>
</body>
</html>
由于您已经在代码中包含 jQuery,因此您可以使用预定义的 CSS 类附加新字段,如下所示:
$('.container').append('<input class="form-control" type="text" placeholder="something"/>');
jQuery很容易调试,然后是vanilla javascript。
希望这可能会有所帮助!
相关文章:
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 添加和删除隐藏字段数组中的值,而不提交表单
- 单击鼠标,用MySQL数据填充html表单输入字段
- 带有条件字段的PHP表单
- 防止在输入字段上单击事件
- 高级自定义字段按单选按钮值排序
- 使用JQuery启用输入字段的单选框
- SmartyStreets:使用条件字段调整表单中已验证勾号的位置
- 组合功能以使用 Jquery 在一组单选按钮中显示输入字段和单选按钮
- 使只读字段不可单击
- 使用 JavaScript 进行 HTML 字段表单验证
- JavaScript 在不输入输入字段/表单的情况下传递输入
- JQuery 在动态添加输入字段时单击浏览,而 ajax 不起作用
- 我可以让时间选择器在输入字段中单击时触发吗?
- 将隐藏字段表单值传递给控制器
- 隐藏小视口中的字段,单击按钮再次显示
- 我可以给html文本字段表单中的元素提供相同的名称和id吗
- 在新行上显示输入字段(基于单选)
- 在文本字段(表单)后插入节点
- 动态生成的名称字段的单选按钮组验证