Question

我有一个新的页面新表单，我想要连接到一些现有的服务器端的东西。现在我有这个代码可以工作，但它有点笨重：

// make a form
var OrderStatusSearchQueryForm = document.createElement("form");

// make first input 
var Operation = document.createElement("input");
Operation.name="Operation";
Operation.value="Search";
OrderStatusSearchQueryForm.appendChild(Operation);

// make second input
var SearchFieldValue = document.createElement("input");
SearchFieldValue.name="SearchFieldValue";
SearchFieldValue.value=document.formonpage.searchString.value
OrderStatusSearchQueryForm.appendChild(SearchFieldValue);

// not shown, many more inputs like the above

// set a few important values from the form on the page

OrderStatusSearchQueryForm.submit();

我想知道我是否可以编写一个只需要几个参数并执行相同操作的函数。该功能允许我用以下内容替换上面的内容：

var OrderStatusSearchQueryForm = document.createElement("form");
stakmagic("Operation", "Search", OrderStatusSearchQueryForm);
stakmagic("SearchFieldValue", document.formonpage.searchString.value, OrderStatusSearchQueryForm);
OrderStatusSearchQueryForm.submit();

Answer 1

我不确定你在问什么。您可能已经回答了自己的问题。但如果您想要这个功能，请转到：

function stakmagic(name, value, form) {
    var Input = document.createElement("input");
    Input.name = name;
    Input.value = value;
    form.appendChild(Input);
}

Answer 2

 var inps = "<input name='xx' value='xx' /><input name='xx' value='xx' /> .......etc";
 <form>
     <div id='mydiv'></div> 
 </form>
 document.getElementByID('mydiv').innerHTML( inps );

这将同时创建所有元素。

Answer 3

显然你可以使用函数，但为什么不让HTML解析器为你创建DOM，它实际上是significantly faster而不是自己创建它。

var html = '<form id="myform">' +
           '<input name="Operation" value="Search" />' +
           '<input name="SearchFieldValue" value="' +
           document.formonpage.searchString.value +
           '" /></form>';

document.getElementById("form-container").innerHTML = html;

document.getElementById("myform").submit();

显然即使这不是最佳的，因为你的javascript中有一堆硬编码的html。但这个问题也与你原来的javascript有关。目前最干净，最简单的方法是 javascript templates。您将能够像使用常规HTML一样维护HTML，并使用非常少的代码来执行相同的操作。

如何有效地添加许多字段到我在JavaScript中创建的表单？

3 个答案: