如何解析輸入[]值，並把它們放入一個Javascript數組

比方說，我有這樣的：如何解析輸入[]值，並把它們放入一個Javascript數組

<form id='foo'> 
<input name='bar[name]' /> 
<input name='bar[age]' /> 
</form>

我怎樣才能形式foo內的陣列輸入的值，並把它們放到一個關聯數組/ object like this：

var result = {bar:{name:'blah',age:21}};

PS我不想爲此使用任何框架。

來源

2011-08-26 Ryan

「純JavaScript的」我想你的意思是「如果不使用由其他人編寫的JavaScript，如jQuery的或YUI隊」？（而不是「沒有Flash」或「沒有DOM」？） – Quentin

從技術上講，jQuery ***是***「純JavaScript」。你是否想了解如何閱讀[用簡單的DOM表單元素]（https://developer.mozilla.org/en/DOM/HTMLFormElement）或者你想要更高效並獲得填充內容？ –

是'querySelectorAll'還純嗎？ – pimvdb

這將讓你的元素：

var result = {}; 
    var elements = document.forms.foo.getElementsByTagName("input"); 
    for(var i = 0; i < elements.length; i++) 
    { 
     /* do whatever you need to do with each input */ 
    }

來源

2011-08-26 21:33:13 scrappedcola

是...但我們要如何獲得在for循環使用名稱attributes.Namely條[名]，酒吧[年齡] –

@DimitrisPapageorgiou的值'elments [I] .name' – scrappedcola

感謝.. 。我做到了，它的工作 –

您可以映射元素，像這樣的對象。

function putIntoAssociativeArray() { 

    var 
     form = document.getElementById("foo"), 
     inputs = form.getElementsByTagName("input"), 
     input, 
     result = {}; 

    for (var idx = 0; idx < inputs.length; ++idx) { 
     input = inputs[idx]; 
     if (input.type == "text") { 
      result[input.name] = input.value; 
     } 
    } 

    return result; 
}

來源

2011-08-26 21:35:01 Wyatt

var inputs = document.getElementsByTagName('input'); 
var field_name, value, matches, result = {}; 
for (var i = 0; i < inputs.length; i++) { 
    field_name = inputs[i].name; 
    value = inputs[i].value; 

    matches = field_name.match(/(.*?)\[(.*)\]/); 

    if (!results[matches[0]]) { 
     results[matches[0]] = {}; 
    } 
    results[matches[0]][matches[1]] = value; 
}

來源

2011-08-26 21:37:12

var form = document.getElementById('foo'); 
var inputs = form.getElementsByTagName("input"); 
var regex = /(.+?)\[(.+?)\]/; 
var result = {}; 
for(var i = 0; i < inputs.length; ++i) { 
    var res = regex.exec(inputs[i].name); 
    if(res !== null) { 
     if(typeof result[ res[1] ] == 'undefined') result[ res[1] ] = {}; 
     result[ res[1] ][ res[2] ] = inputs[i].value; 
    } 
}

來源

2011-08-26 21:42:55 nobody

我需要這個做我自己，並找到這個問題，我不喜歡任何的答案後：我不喜歡正則表達式和其他人是有限的。

您可以通過多種方式獲得data變量。當我實現這個時，我將使用jQuery的serializeArray方法。

function parseInputs(data) { 
    var ret = {}; 
retloop: 
    for (var input in data) { 
     var val = data[input]; 

     var parts = input.split('[');  
     var last = ret; 

     for (var i in parts) { 
      var part = parts[i]; 
      if (part.substr(-1) == ']') { 
       part = part.substr(0, part.length - 1); 
      } 

      if (i == parts.length - 1) { 
       last[part] = val; 
       continue retloop; 
      } else if (!last.hasOwnProperty(part)) { 
       last[part] = {}; 
      } 
      last = last[part]; 
     } 
    } 
    return ret; 
} 
var data = { 
    "nom": "123", 
    "items[install][item_id_4]": "4", 
    "items[install][item_id_5]": "16", 
    "items[options][takeover]": "yes" 
}; 
var out = parseInputs(data); 
console.log('\n***Moment of truth:\n'); 
console.log(out);

來源

2012-12-20 19:24:45 RSully

如何解析輸入[]值，並把它們放入一個Javascript數組

回答

相關問題