Question

我正在开发一个项目，客户的要求是添加动态文本框。我制作了动态文本框，但我没有得到文本框的唯一名称。

这是我的代码：

<script type="text/javascript">
    function addfieldset() {

        var namefieldset = document.getElementById("name").cloneNode(true);
        document.getElementById("names").appendChild(namefieldset);
    }
    function deletefieldset(e) {
        var namefieldset = e.parentNode;
        namefieldset.parentNode.removeChild(namefieldset);
    }
</script>
<body>
    <%! public static int i = 1;%>
    <% if (i > 0) { %>
    <div id="names"><div id="name"><% out.print(i);%>Name: <input name="namefield<%= i%>" type="text"/><a href="#" onclick="deletefieldset(this)">delete</a></div></div>

    <input id="addnamebtn" type="button" value="Add Name" onclick="addfieldset()"/>

    <% i++;
}%>
</body>

Answer 1

您正在混合使用两种不同的代码。关键是要实现每个代码执行时和 - 在请求和呈现页面时服务器上的JSP（即之前响应发送到浏览器）和浏览器中的Javascript，后，浏览器会收到已生成的响应。

即。你必须在addfieldset()函数中更改新文本字段的名称（这意味着你必须有一个计数器，已经有多少文本字段）。

Answer 2

试试这个JavaScript和HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
	var i = 0;
	function generateRow() {
		i++;
		var d = document.getElementById("div");
		d.name = "food";
		d.innerHTML += "<p>name"+i+" :<input type='text' name='name" + i + "' /> <a href='#' onclick='deletefieldset(this)'>delete</a></p>";
	}

	function deletefieldset(e) {
		var namefieldset = e.parentNode;
		namefieldset.parentNode.removeChild(namefieldset);
	}
	
	function onLoad() {
		generateRow();
    }
    window.onload = onLoad;
</script>
<body>
	<div id="div"></div>
	<p>
		<input type="button" id="addnamebtn" value="Add Name" onclick="generateRow()" />
	</p>
</body>
</html>

Answer 3

scriptlet中的java代码在服务器端执行。因此，通过Javascript再次克隆它将不会再次执行scriptlet。

您尝试实现的另一种方法是将计数变量存储在javascript中。

var count = 1;

function addfieldset() {
  count++;
  var namefieldset = document.getElementById("name").cloneNode(true);
  var textField = namefieldset.getElementsByTagName('input')[0];
  textField.setAttribute("name", "namefield" + count);
  textField.value = "";

  document.getElementById("names").appendChild(namefieldset);
}

function deletefieldset(e) {
  var namefieldset = e.parentNode;
  namefieldset.parentNode.removeChild(namefieldset);
}

<body>
  <div id="names">
    <div id="name">
      <span>Name:</span>
      <input name="namefield1" type="text" />
      <a href="#" onclick="deletefieldset(this)">delete</a>
    </div>
  </div>
  <input id="addnamebtn" type="button" value="Add Name" onclick="addfieldset()" />
</body>

文本字段名称应该是唯一的

3 个答案: