[英]How to add fileds dynamically using javascript with Bootstrap?
I got the code add fields dynamically here Add fields dynamically - link 我得到的代码在这里动态添加字段动态添加字段-链接
when I try use this code insight my form class <form class="form-horizontal" action="create.php" method="post">
it won't work but when put this filed out from form class it will work I know have to changes in java script but I'm new to JS so please help me the changes 当我尝试使用此代码洞察力来检查表单类<form class="form-horizontal" action="create.php" method="post">
,它将无法正常工作,但是当您将其从表单类中提出时,它将可以正常工作知道必须更改Java脚本,但是我是JS新手,所以请帮助我进行更改
this my form: 这是我的形式:
<body>
<form class="form-horizontal" action="create.php" method="post">
<div class="form-group">
<label for="des" class="col-sm-2 control-label">To Address</label>
<div class="col-sm-8">
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group ">
<input class="form-control"name="fields[]"type="text" placeholder="To....." />
<span class="input-group-btn">
<button class="btn btn-success btn-add"type="button">
<span class="glyphicon glyphicon-plus"></span> </button> </span>
</div>
</form>
</div>
</div>
</div>
<div class="form-group">
<input name="submit" class="btn btn-success" type="submit" value="Save" id="search"/>
</div>
</form>
</body>
myscript : myscript:
<script>
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>
You made a mistake in your HTML markup, adding a form inside another form, and i had a look at your reference, you would see you did make a mistake. 您在HTML标记中犯了一个错误,在另一个表单中添加了一个表单,而我查看了您的引用,您会发现您确实犯了一个错误。
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<input class="form-control" name="fields[]" type="text" placeholder="Type something" />
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<br>
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>
</div>
</div>
</div>
So if you wanted to add your POST method, you would add it into the form tag there, and not create a new one. 因此,如果您想添加POST方法,则可以将其添加到此处的form标记中,而不创建一个新方法。
Hope this helps. 希望这可以帮助。
here i did a mistake to add form insight form the easy way to add multiple fields : 在这里,我在添加表单洞察表单时犯了一个错误,即添加多个字段的简单方法:
<label for="des" class=" control-label">Description</label>
<div class="multi-field-wrapper ">
<div class="multi-fields">
<div class="multi-field">
<div class="col-sm-8">
<input id="des" type="text" class="form-control" name="descrip[]"></div>
<span class="remove-field">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span></button></span>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
script funtion : 脚本功能:
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.