javascript - 具有相同名称的表单输入 + serializeArray()

Question

有一个由脚本创建的输入表，可能包含任意数量的输入行，因此有很多同名的输入元素。问题是 serializeArray() 不会拆分这些输入行，因此我无法在 PHP 端处理这些行。

<form>
  <table>
    Here might be any amount of tr like these
    <tr>
      <td><input type='text' name='username' placeholder='username'/></td>
      <td><input type='text' name='about' placeholder='about'/></td>
      <td><input type='text' name='website' placeholder='website'/></td>
    </tr>
    <tr>
      <td><input type='text' name='username' placeholder='username'/></td>
      <td><input type='text' name='about' placeholder='about'/></td>
      <td><input type='text' name='website' placeholder='website'/></td>
    </tr>
  </table>
  <input type='button' id='submit' value='Submit' />
</form>
<p>
JSON:
</p>

$('#submit').on('click',function(){
  var data = $('form').serializeArray();
  var json = JSON.stringify(data);
  $('p').append(json);
})

https://jsfiddle.net/5y4fwLpu/3/

Answer 1

将结果分成 block ，然后按行重新分组。

$('#submit').on('click',function(){
    var data = $('form').serializeArray();

  processedData = [];
  var i,j,w,temparray,chunk = 3;

  for (i=0,j=data.length; i<j; i+=chunk) {
    form = data.slice(i,i+chunk);

    var obj = {};
    for(w=0; w < chunk; w++) {

      var name = form[w].name;
      var value = form[w].value;
      obj[name] = value;

    }
    processedData.push(obj);
  }

  var json = JSON.stringify(processedData);

  $('p').append(json);
})

结果是这样的:

JSON: [{"username":"User 1","about":"About 1","website":"Web 1"},{"username":"User 2","about ":"关于 2","网站":"Web 2"}]