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

JS reading of inputs into dynamically created HTML form fields

本文关键字：HTML 表单 字段 创建 动态 读取 输入 JS      更新时间：2023-09-26

寻求帮助;

我一直在摆弄这里和那里的代码片段，动态地将文本字段添加到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
    }
});

那么，表单的"submit"按钮如下:

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

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

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

，其中"?????????????"表示尝试从动态添加的mytext[]字段....中读取条目这是我想不通的部分。

建议表示赞赏。Thx .

你就快完成了。

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