修改javascript代码遍历表格中的所有变量

Question

我有下面的代码，直到现在正常工作，因为我决定添加更多的变量到窗体。我怎样才能使这个功能更加智能，并且能够传递和传递表单中的所有变量？

function getquerystring(strFormName) { 
    var form  = document.forms[strFormName]; 
    var word = form.clock_code.value; 
    qstr = 'clock_code=' + escape(word); // NOTE: no '?' before querystring 
    return qstr; 
} 

完整的JS代码@pastie

Answer 1

它看起来像你序列化形式的查询字符串？如果是这样的话，那么这是一个JavaScript库非常好的地方。

其中每一个都会将页面上的第一个表单序列化为查询字符串。

// ExtJS 
var str = Ext.lib.Ajax.serializeForm(Ext.select('form').elements[0]); 

// jQuery 
var str = $("form").serialize(); 

// MooTools 
var str = $$('form').toQueryString(); 

// PrototypeJS 
var str = $$('form')[0].serialize(); 

你可以看到一些其他方法，以及它们如何在比较http://jquery.malsup.com/form/comp/

Answer 2

假设他们都是简单的领域，以下应该只是罚款（没有测试它，但 - 对不起，如果它不“编译”）：

问题只提到文本呸：

function getquerystring(strFormName) { 
    var qstr = ''; 
    var form  = document.forms[strFormName]; 
    var elements = form.elements; 
    var first = true; 
    for (elem in elements) { 
     var word = elem.value; 
     var name = elem.name; 
     if (first) { 
     first = false; 
     } else { 
     qstr = qstr + '&'; 
     } 
     qstr = qstr + name + '=' + escape(word); 
    } 
    return qstr; 
} 

上支持多种元素类型添加信息所以我认为更简单的答案就足够了。错误！

很高兴您能够使用JQuery（其中的一些），但为了完整起见，我将仅仅用一些关于如何构建您自己的“动态表单处理程序”的信息来充实它。

首先，你必须增加检查的类ELEM的，就像这样：

function isCheckbox(o){ return (o && o.constructor == Checkbox) } 

，你必须再做点什么根据对象的您正在寻找的类型有所不同。

例如：

for (var elem in elements) { 
    var value = ''; 
    var name = elem.name; 
    if (isCheckbox(elem)) { 
     value = elem.checked ? 'true' : 'false'; 
    } else if (isSingleSelect(elem)) { 
     var index = elem.selectedIndex; 
     if(selected_index > 0) { 
      value = elem.options[selected_index].value; 
     } 
    } 
    } 

有可能是，你必须把值到的东西是有意义的您的应用程序，就像在一个多选组合框的情况。您可以为每个值发送一个名称=值对，或者将它们转换为逗号分隔列表或类似名称 - 这完全取决于您的应用程序。但有了这个方法人们当然可以建立符合其特定需求的“动态表单处理程序”。

退房这篇文章，了解如何处理每个表单字段类型有用的东西：http://www.javascript-coder.com/javascript-form/javascript-get-form.htm

Answer 3

与您的代码的问题是，你只抓住了clock_code元素值，而忽略休息。这里是我写的一个替代品：

function getquerystring(strFormName) { 
    var qstr = '', word = ''; 
    var key = 0; 
    var form  = document.forms[strFormName]; 
    var fields = ['clock_code', 'message', 'type']; 

    for (var i = 0; i<fields.length; i++) { 
     key = fields[i]; 
     word = form[key].value; 
     if (qstr && qstr.length > 0) { 
      qstr += '&'; 
     } 
     qstr += encodeURIComponent(key) + '=' + encodeURIComponent(word); 
    } 

    return qstr; 
} 

本杰明的方法是更灵活一点;矿山只查询那些fields阵列

Answer 4

在具体命名字段试试这个

function formToQueryString(form) { 
    var elements = form.elements; 
    var cgi = []; 
    for (var i = 0, n = elements.length; i < n; ++i) { 
    var el = elements[i]; 
    if (!el.name) { continue; } 
    if (el.tagName === 'INPUT' && (el.type === 'checkbox' || el.type === 'radio') 
     && !el.checked) { 
     continue; 
    } 
    cgi.push(encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value)); 
    } 
    return cgi.length ? '?' + cgi.join('&') : ''; 
}