相同表单中的三个或更多字段-如何动态添加/删除空白字段

three or more fields in same form - how to add/remove blank fields dynamically

本文关键字：字段 何动态 空白 添加 删除 动态 表单 三个      更新时间：2023-09-26

在同一个表单中有三个独立的字段。我想有能力动态添加/删除每个空白字段。

这里是字段和一个JQuery段-它只适用于第一个字段，而不适用于其他字段。我需要做什么?我也试过把第二个。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();
}
相关文章：