JS 将输入读取到动态创建的 HTML 表单字段中答案

【问题标题】：JS reading of inputs into dynamically created HTML form fieldsJS 将输入读取到动态创建的 HTML 表单字段中
【发布时间】：2015-11-29 20:52:10
【问题描述】：

寻求帮助；

我一直在到处玩代码 sn-ps，它可以动态地将文本字段添加到 HTML 表单中。该页面是基本的：一个表单提示输入至少一个文本字段；有一个按钮可以添加更多的文本字段；有一个按钮来提交所有显示的字段中的条目 - 想法是将字段条目读入变量，然后通过同一个 html 页面简单地显示给用户。

向表单添加字段可以正常工作。

我想不通的是如何在同一页面中仅使用 JS 来读取字段中的输入（即没有 PHP 或其他基于服务器的数据读取）。

从代码中提取，创建附加字段如下：

        <div class="input_fields_wrap">
            <button class="add_field_button">Add More Fields</button>
            <div><input type="text" name=mytext[]></div>
        </div>

而用于动态添加字段的JS部分显示为：

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><input type="text" name=mytext[]/><a href="#" class="remove_field">x</a></div>'); //add input box
    }
});

那么，表单的“提交”按钮如下：

<input name="button" onclick="addtext()" type="button" value="Show" />

那么，函数（在同一页面中）addtext() 基本上是：

   function addtext() {
       var f2 = document.myform.?????????????
       document.writeln(f2,'<br>')
    }

“????????????”表示尝试从任何 mytext[] 动态添加的字段中读取条目....这是我无法想象的部分。

建议表示赞赏。谢谢。

【问题讨论】：

在表单提交后读取同一页面中的值，在不同的页面中？在什么功能？这个功能有什么作用，你用它走了多远？值何时可用，一旦输入或在您提交表单之前 - 单击“提交”按钮或其他什么？
- 这个想法是在同一个 html 页面中读取表单输入
- 表单有一个输入类型按钮，它调用一个函数 addtext() - 该函数的想法是简单地将字段输入读入变量（例如 var f1 = document.form.field. value) - 然后函数简单地调用 document.writeln() 来显示这些变量。基本思想是 - 呈现带有添加输入字段选项的表单，单击提交时读取这些字段，向用户显示这些条目。
请edit 在那里提供您的问题的详细信息，这样它们就不会被埋没在随时容易被忽略、未读和/或删除的短暂的 cmets 中。此外，在您添加详细信息时，请尝试澄清问题，以使其具有可读性和完整性。这样做时请记住，这是我们对您的情况的全部了解，我们不知道其他任何事情。因此，请尝试根据您提供的信息确定如果您不了解更多信息，您是否可以理解问题。谢谢。

标签： javascript forms dynamic field

【解决方案1】：

你几乎已经通过了。

var readInputVariables = function(){
  $('input:text').each(function(index,element){
      console.log(element.val()); // do whatever you want with the value;
  })
}

【讨论】：

“[OP 已经] 几乎通过了”是什么意思 - 他没有显示任何尝试读取 <input /> 元素值的代码，或者，到目前为止，描述了（当前假设的）函数应该从什么点开始尝试读取值。此外，input:text 选择器的效率低于 input[type=text]（因为它必须使用 Sizzle，而不是原生的 document.querySelectorAll()）。
问题仅仅在于阅读 mytext[] 字段条目 - 最简单的构造是什么？ var f = document.myform.mytext[].value ?