在 jsp 中动态添加 <form:input> 文本框答案

【问题标题】：Dynamically add <form:input> textbox in jsp在 jsp 中动态添加 <form:input> 文本框
【发布时间】：2015-12-07 06:08:06
【问题描述】：

我想动态添加 jsp 文本框。我正在使用以下代码单个文本框。

<div id="certificationtog">
	<p class="setting">
	<input type="button" id="addrows" name="addrows" class="addperson" value="Add Rows">
    <input type="button" id="removerows" class="removerows" value="Delete Rows" />  
	<br><br>
  <span style="width: 0px; margin-left: 20px; font-weight: bold; float: none;">Diploma/Certificate:</span>
	<form:input path="certification" type="text" title="Only Text Allowed" pattern="[a-zA-Z\s'.,@:&?!()$#/\\]+" />									 
								 
    </p>
</div>

这里，点击addrow按钮时，我想动态添加文本框。

【问题讨论】：

标签： javascript jquery jsp

【解决方案1】：

试试这个：

<script type="text/javascript">
   function add() {
     var element = document.createElement("input");
     element.setAttribute("type", "text");
     element.setAttribute("name", "mytext");
    var spanvar = document.getElementById("myspan");
    spanvar .appendChild(element);
   }
</SCRIPT>
<div id="certificationtog">
   <p class="setting">
      <input type="button" id="addrows" name="addrows" class="addperson" 
        value="Add Rows" onclick="add();">
      <input type="button" id="removerows" class="removerows" 
        value="Delete Rows" />  
      <span id="myspan"></span>
      <br><br>
      <span style="width: 0px; margin-left: 20px; font-weight: bold; float: none;">
        Diploma/Certificate:
      </span>
   </p>
</div>

【讨论】：

【解决方案2】：

<div id="certificationtog">
    <p class="setting">
    <input type="button" id="addrows" name="addrows" class="addperson" value="Add Rows">
    <input type="button" id="removerows" class="removerows" value="Delete Rows" />  
    <br><br>
  <span style="width: 0px; margin-left: 20px; font-weight: bold; float: none;">Diploma/Certificate:</span>
    <form:input path="certification" type="text" title="Only Text Allowed" pattern="[a-zA-Z\s'.,@:&?!()$#/\\]+" />                                   
                                 
    </p>
</div>

【讨论】：

【解决方案3】：

任何人都在寻找 jquery (+bootstrap) 方式：

<html>
<head>
<title>Add input using jquery</title>
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
<link rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
    integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
<script>
    $(document)
            .ready(
                    function() {
                        var wrapper = $(".myFields");
                        $(add_button)
                                .click(
                                        function(e) {
                                            e.preventDefault();
                                            $(wrapper)
                                                    .append(
                                                            '<div class="form-group"><label class="col-md-2" for="person">Person Name</label><input type="text" name="mytext[]" class="col-md-6"/><a href="#"   class="btn btn-danger btn-sm delFld"><span class="fas fa-trash-alt"></span>Delete</a></div>'); //add input box
                                        });

                        $(wrapper).on("click", ".delFld", function(e) {
                            e.preventDefault();
                            $(this).parent('div').remove();
                        })
                    });
</script>

<style>
.container {
    padding: 15px 10px;
    margin: 15px 15px 15px 10px;
}

.addNew {
    margin: 0px 0px 0px 15px;
}
</style>
</head>
<body>
    <div class="container">
        <div class="myFields"></div>
        <button id="add_button" class="addNew btn btn-success btn-sm">
            <span class="fa fa-plus"></span>Add New
        </button>
    </div>
</body>
</html>

这里是JSFIDDLE

【讨论】：

【解决方案4】：

请参阅 JQuery append() 或 appendTo() ： http://api.jquery.com/append/

【讨论】：