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

试试这个

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('&') : '';
}

Answer 2

看起来就像你将表单序列化为查询字符串一样？如果是这种情况，那么这是一个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 3

假设它们都是简单的字段，以下应该可以正常工作（不测试它，但是如果它不“编译”，则抱歉）：

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 4

您的代码的问题在于您只抓取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数组

中具体命名的字段

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

4 个答案: