當序列化表單數據時保留分組

Question

我有一個具有類似輸入元素組的HTML表單。

如何在保留分組的同時序列化表單數據，而不迭代輸入元素？

如果有必要實現目標，我可以改變表單結構。

示例輸入：

<form id="form"> 
    <div> 
    <input name="id" value="1" type="hidden"> 
    <input name="quantity" value="10"> 
    </div> 
    <div> 
    <input name="id" value="2" type="hidden"> 
    <input name="quantity" value="20"> 
    </div> 
    <div> 
    <input name="id" value="3" type="hidden"> 
    <input name="quantity" value="30"> 
    </div> 
</form> 

預期輸出：

{ 
    "1": { "id": "1","quantity": "10" }, 
    "2": { "id": "2","quantity": "20" }, 
    "3": { "id": "3","quantity": "30" } 
} 

我嘗試：

console.log($('#form').serializeArray()); 

但形式數據沒有被分組：

[ 
    {"name":"id","value":"1"},{"name":"quantity","value":"10"}, 
    {"name":"id","value":"2"},{"name":"quantity","value":"20"}, 
    {"name":"id","value":"3"},{"name":"quantity","value":"30"} 
] 

Answer 1

的FormData構造-當傳遞給形式的參考節點返回一個包含所有形式的控制和它們各自的值的迭代器。

const form = document.querySelector("#form"); 
const data = new FormData(form); 

console.log(Array.from(data)); 
// [["id","1"],["quantity","10"],["id","2"],["quantity","20"],["id","3"],["quantity","30"]] 

問題是FormData沒有分組表單控件的任何方式。這將需要一個算法，而這又需要一些方法來識別給定控件屬於哪個組。

在這裏，我已經將每個表單控件的名稱屬性用一個組標識符和一個冒號作爲前綴。在算法中，我用冒號分隔名稱屬性，使用第一個結果作爲組，第二個結果作爲關鍵字。

const form = document.querySelector("#form"); 
 
const data = new FormData(form); 
 

 
const grouped = Array.from(data).reduce((m, e) => 
 
    ((([g, k, v] = [...e[0].split(':'), e[1]]) => 
 
    (m[g] = Object.assign({}, m[g]))[k] = v)(), m), {}); 
 

 
console.log(grouped);

<form id="form"> 
 
    <input name="1:id" value="1" type="hidden"><input name="1:quantity" value="10"> 
 
    <input name="2:id" value="2" type="hidden"><input name="2:quantity" value="20"> 
 
    <input name="3:id" value="3" type="hidden"><input name="3:quantity" value="30"> 
 
</form>

Answer 2

var arr = [] 

$($('form').prop('elements')).each(function(e){ 
arr.push({ 
    "id": e, 
    "qty": this.value 
}); 
}); 
console.log(arr); 

試試這個。

Answer 3

與其他發佈的答案沒什麼不同，但可能會有所幫助。

console.log($('#form').find('div').map(function() { 
 
    return { 
 
    'id': $(this).find('[name=id]').val(), 
 
    'quantity': $(this).find('[name=quantity]').val() 
 
    }; 
 
}).get());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
    <div> 
 
    <input type="hidden" name="id" value="1" /> 
 
    <input name="quantity" min="0" type="text" value="10" /> 
 
    </div> 
 
    <div> 
 
    <input type="hidden" name="id" value="2" /> 
 
    <input name="quantity" min="0" type="text" value="20" /> 
 
    </div> 
 
    <div> 
 
    <input type="hidden" name="id" value="3" /> 
 
    <input name="quantity" min="0" type="text" value="30" /> 
 
    </div> 
 
</form>

Answer 4

你可以不喜歡它：

(function($){ 
 
    $(function(){ 
 
    $("#RunCode").click(function(e){ 
 
     var FormData = []; 
 
     $("#form input.serialize").each(function(){ 
 
     var name = $(this).attr("name"); 
 
     name = name.split("[") 
 
     var id = name[1].replace("]", ""); 
 
     name = name[0]; 
 
     if(typeof FormData[id] == "undefined"){ FormData[id] = {}; } 
 
     FormData[id][name] = $(this).val(); 
 
     console.log(name, id, $(this).val(), FormData); 
 
     }); 
 
     var str = JSON.stringify(FormData); 
 
     alert(str); 
 
     
 
     e.preventDefault(); 
 
     return false; 
 
    }); 
 
    }); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
    <div> 
 
    <input class="serialize" type="hidden" name="id[0]" value="1"> 
 
    <input class="serialize" name="quantity[0]" min="0" type="text" value="10" /> 
 
    </div> 
 
    <div> 
 
    <input class="serialize" type="hidden" name="id[1]" value="2"> 
 
    <input class="serialize" name="quantity[1]" min="0" type="text" value="20" /> 
 
    </div> 
 
    <div> 
 
    <input class="serialize" type="hidden" name="id[2]" value="3"> 
 
    <input class="serialize" name="quantity[2]" min="0" type="text" value="30" /> 
 
    </div> 
 
    <input type="button" id="RunCode" value="Run Code" /> 
 
</form>