Question

我在这里找到了这段代码（感谢XaviLópez），它非常适合我需要添加到项目中的内容，但是我需要一些帮助在JavaScript中添加表单发布和提交按钮。我对这个问题一无所知，我试着看一些例子，但似乎都没有用。如果有人可以帮助我，我将不胜感激。在用户添加了相关数量的输入框并添加了数据之后，我想要一个提交按钮，它将结果发布到另一个网页（结果页面）

我已经在以下代码中添加了解决方案（谢谢MTCoster），但是我现在试图找到一种解决方案，使提交按钮仅在添加条目后才出现。我尝试了不同的方法，但没有用。

function addFields() {
  // Number of inputs to create
  var number = document.getElementById('member').value;
  
  // Container <div> where dynamic content will be placed
  var container = document.getElementById('container');
  
  // Clear previous contents of the container
  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }
  
  for (i = 0; i < number; i++) {
    // Append a node with a random text
    container.appendChild(document.createTextNode('Member ' + (i + 1) + ' '));
    
    // Create an <input> element, set its type and name attributes
    var input = document.createElement('input');
    input.type = 'text';
    input.name = 'member' + i;
    container.appendChild(input);
    
    // Append a line break 
    container.appendChild(document.createElement('br'));
  }
}

<input type="text" id="member" name="member" value="">Number of Pins: (max. 48)<br>
<a href="#" id="filldetails" onclick="addFields()">Add Pinout Entries</a>
<form action="result.asp" method="POST">
<div id="container"></div>
<input type="submit" value="Add Data">
</form>

Answer 1

您快要准备好了-您所要做的就是将输入内容包装在<form>元素中：

function addFields() {
  // Number of inputs to create
  var number = document.getElementById('member').value;
  
  // Container <div> where dynamic content will be placed
  var container = document.getElementById('container');
  
  // Clear previous contents of the container
  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }
  
  for (i = 0; i < number; i++) {
    // Append a node with a random text
    container.appendChild(document.createTextNode('Member ' + (i + 1) + ' '));
    
    // Create an <input> element, set its type and name attributes
    var input = document.createElement('input');
    input.type = 'text';
    input.name = 'member' + i;
    container.appendChild(input);
    
    // Append a line break 
    container.appendChild(document.createElement('br'));
  }
}

<input type="text" id="member" name="member" value="">Number of Pins: (max. 48)<br>
<a href="#" id="filldetails" onclick="addFields()">Add Pinout Entries</a>
<form action="/url/to/post/to" method="POST">
  <div id="container"></div>
  <input type="submit">
</form>

如果您希望仅在至少一个输入可见后才显示提交按钮，则可以将其添加到div#container末尾的addFields()处。我将其留给OP练习，因为它与您添加输入字段的方式没有太大不同。

将表单发布/提交按钮添加到javascript脚本

1 个答案: