无法从动态创建的表单中获取表单

Question

我有一个按钮，可以在我的html页面上显示一个表单。我有一个函数可以获取表单中的数据：

function getFormData($form){

   var unindexed_array = $form.serializeArray();

   var indexed_array = {};

   $.map(unindexed_array, function(n, i){

      indexed_array[n['name']] = n['value'];

   });

   return indexed_array;

这个函数似乎很有效，因为我可以从其他没有动态创建的表单中获取数据。我通过点击按钮以这种方式创建表单：

var new_form = document.createElement('form');
new_form.id = "new_form";

// (...) all the inputs for the form

// and I append to an existent div 
existent_div.appendChild(new_form);
// and then the inputs
new_form.appendChild(input1); (...)

我还有另一个按钮，负责获取表单数据。它调用这个函数，在函数的中间部分我有以下代码：

var new_form_info = getFormData($("#new_form"));
// I get an empty object... 

为什么会发生这种情况？我不是一位经验丰富的程序员，所以对于任何错误表示抱歉...

- Kunis

---

您有一个语法错误。您应该使用 new_form.appendChild(input)。请检查控制台，它应该显示 "append_child" 不是一个函数。 - synthet1c

@synthet1c 哦，没看见。那是打错字了。谢谢。 - Kunis

在传递给 getFormData 函数之前，从选择器 $("#new_form") 中获取的对象是什么？ - Marek Naskret

@MarekNaskret 我会得到这个："[form#new_form]" - Kunis

但是您是否看到其中的动态创建字段？ - Marek Naskret

Answer 1

你是否有使用纯JS和jQuery混合编程的原因？jQuery表单创建可以帮助你。

var new_form = $('<form></form>')
        .attr('id', "new_form")
        .append('<input type="text" value="1" name="inp" />');    
$('#existent_div').append(new_form);
console.log($('#new_form').serializeArray());

https://jsfiddle.net/yej5xc8s/

更新

如果您附加一个输入并定义existent_div，则混合也可以起作用。

function getFormData($form){
   var unindexed_array = $form.serializeArray();
   var indexed_array = {};
   $.map(unindexed_array, function(n, i){
      indexed_array[n['name']] = n['value'];
   });

   return indexed_array;
}

var new_form = document.createElement('form');
new_form.id = "new_form";
var input = document.createElement('input');
input.name = "qwer";
input.value = "1";
new_form.appendChild(input);

var existent_div = document.getElementById('existent_div');
existent_div.appendChild(new_form);

console.log(getFormData($("#new_form")));

https://jsfiddle.net/yej5xc8s/1/

- Anton Chukanov