Conserver le regroupement lors de la sérialisation des données de formulaire

Question

J'ai un formulaire HTML avec des groupes d'éléments d'entrée similaires.

Comment puis-je sérialiser les données de formulaire tout en préservant le regroupement, sans itération des éléments d'entrée?

Je suis ouvert à la modification de la structure de formulaire si cela est nécessaire pour atteindre l'objectif.

entrée Exemple:

<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> 

Sortie prévue:

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

J'ai essayé:

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

Mais les données de formulaire n'a pas été regroupées:

[ 
    {"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

Le constructeur-FormData lorsque passé une référence à un noeud-affiche un itérateur formulaire contenant tous les contrôles du formulaire et de leurs valeurs respectives.

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"]] 

Le problème est FormData n'a pas de grouper les contrôles de formulaire. Cela nécessiterait un algorithme qui, à son tour, nécessiterait une méthode d'identification du groupe auquel un contrôle donné appartient.

Ici, j'ai préfixé l'attribut name de chaque contrôle de formulaire avec un identificateur de groupe et un deux-points. Dans l'algorithme, je divise l'attribut name par deux points, en utilisant le premier résultat comme groupe et le second résultat comme clé.

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); 

essayer.

Answer 3

Pas si différent des autres réponses affichées mais pourrait être utile.

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

Vous pouvez le faire comme:

(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>