[英]three or more fields in same form - how to add/remove blank fields dynamically
我在同一表格中有三個單獨的字段。 我希望能夠為每個字段動態添加/刪除空白字段。
這是字段和JQuery段-確實適用於第一個字段,但不適用於其他字段。 我需要做什么? 我還嘗試將第2個.append語句放到第一個中,但這也不起作用。
我還向第二個警報發出警報,以查看是否會觸發。 可以,但是按鈕調用不起作用。
如果我可以使用前兩個字段,該如何處理第三個字段? 就像我說的,第一個很好用。
領域
<div class="col-sm-3" id="submitterEmail">
Email<g:field type="email" name="submitterEmail" class="form-control" required="" value="" aria-labelledby="submitterEmail-label"/><button id="add">Add+</button>
</div>
<div class="col-sm-2">
Fax<g:field type="text" name="submitterFax" class="form-control" required="true" value="" aria-labelledby="submitterFax-label"/><button id="add2">Add+</button>
</div>
<div class="col-sm-5">
Specimen<g:select name="specimen" from="" class="form-control" type="text" required="true" class="form-control" aria-labelledby="specimen-label"/>
</div>
jQuery查詢
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add").click(function (e) {
//Append a new row of code to the div
$("#submitterEmail").append('<div><g:field type="email" name="submitterEmail" class="form-control" required="" value="" aria-labelledby="submitterEmail-label"/><button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add2").click(function (e) {
//Append a new row of code to the div
$("#submitterFax").append('<div><g:field type="text" name="submitterFax" class="form-control" required="" value="" aria-labelledby="submitterFax-label"/><button class="delete">Delete</button></div>');
alert('this is an alert test)
});
});
});
試試這個會起作用
<?php ?>// you can remove this tag.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add").click(function (e) {
//Append a new row of code to the div
$("#submitterEmail").append('<div><input type="text" name="submitterEmail" class="form-control" required="" value="" aria-labelledby="submitterEmail-label"/><button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add2").click(function (e) {
//Append a new row of code to the div
$("#submitterFax").append('<div><input type="text" name="submitterFax" class="form-control" required="" value="" aria-labelledby="submitterFax-label"/><button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
</script>
HTML部分。
<div class="col-sm-3" id="submitterEmail">
Email<g:field type="email" name="submitterEmail" class="form-control" required="" value="" aria-labelledby="submitterEmail-label"/><button id="add">Add+</button>
</div>
<div class="col-sm-2" id="submitterFax">
Fax<g:field type="text" name="submitterFax" class="form-control" required="true" value="" aria-labelledby="submitterFax-label"/><button id="add2">Add+</button>
</div>
<div class="col-sm-5">
Specimen<g:select name="specimen" from="" class="form-control" type="text" required="true" class="form-control" aria-labelledby="specimen-label"/>
</div>
如果有人感興趣的話,我辦公室的一位同事也想出了此替代解決方案。...也許涉及更多一點,但也可以與某些Bootstrap元素和格式配合使用。 如果它可以幫助某人(它對我有所幫助!),那么我很樂意分享。
var counter = 0;
function addContactEmail(){
$("#submitterEmailTbody").append('<tr id="submitterEmail'+counter+'Row"><td><input type="text" name="submitterEmail" class="form-control" required=""/></td><td><button type="button" class="btn btn-danger" onclick="deleteContactEmail('+counter+')" onkeypress="deleteContactEmail('+counter+'); return false"><span class="glyphicon glyphicon-minus"></span></button></td></tr>');
counter++;
}
function deleteContactEmail(id){
$("#submitterEmail"+id+"Row").remove();
}
function addContactFax(){
$("#submitterFaxTbody").append('<tr id="submitterFax'+counter+'Row"><td><input type="text" name="submitterFax" class="form-control" required=""/></td><td><button type="button" class="btn btn-danger" onclick="deleteContactFax('+counter+')" onkeypress="deleteContactFax('+counter+'); return false"><span class="glyphicon glyphicon-minus"></span></button></td></tr>');
counter++;
}
function deleteContactFax(id){
$("#submitterFax"+id+"Row").remove();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.