J'ai donc un formulaire avec deux groupes identiques d'entrées qui représentent des informations sur l'éducation. Il pourrait y en avoir plus de deux car je souhaite inclure un bouton pour créer un nouveau groupe afin que l'utilisateur puisse mettre toute sa formation comme dans LinkedIn.
education:[
{
institutionName:"Harvard",
courseName:"Web Development",
startDate:"2000-11",
endDate:"2008-11"
},
{
...
}
]
Maintenant, si j'utilise l'API FormData pour obtenir les données du formulaire comme ceci:
(2)Â ["institutionName", "Harvard"] (2)Â ["courseName", "Web Development"] (2)Â ["startDate", "2000-11"] (2)Â ["endDate", "2008-11"] (2)Â ["institutionName", "Oxford"] (2)Â ["courseName", "Business Management"] (2)Â ["startDate", "2009-10"] (2)Â ["endDate", "2010-05"]
J'obtiens le résultat suivant:
for(let entry of formData.entries()){
console.log(entry);
}
Ce que je veux réaliser, c'est pour obtenir la sortie d'une manière organisée, comme ceci:
<form id="formCV" action="">
<div id="educationContainer">
<!-- First Group -->
<div class="education">
<div>
<input type="text" name="institutionName">
</div>
<div>
<input type="text" name="courseName">
</div>
<div>
<input type="month" name="startDate">
</div>
<div>
<input type="month" name="endDate">
</div>
</div>
<!-- Second Group -->
<div class="education">
<div>
<input type="text" name="institutionName">
</div>
<div>
<input type="text" name="courseName">
</div>
<div>
<input type="month" name="startDate">
</div>
<div>
<input type="month" name="endDate">
</div>
</div>
</div>
</form>
Je suis donc intéressé à connaître la meilleure approche pour y parvenir. Merci d'avance pour votre aide!
4 Réponses :
Cela n'a pas de sens d'avoir deux formes égales, l'une étant suffisante.
En plus du formulaire, vous devriez avoir une liste qui montre chaque élément ajouté.
C'est ce que je recommande.
Je ne travaille pas avec deux formes égales. Permettez-moi de vous donner un peu plus de contexte: je travaille dans un générateur de CV, donc mon formulaire contient des champs pour les antécédents scolaires / l'expérience professionnelle. Donc, si j'ai travaillé dans 3 endroits différents, je dois mettre les informations nécessaires sur chacun d'eux, il y a donc le modèle avec la classe "éducation" qui sera cloné chaque fois qu'un utilisateur clique sur un bouton pour ajouter un nouveau champ d'expérience. Lors de son envoi, il peut y avoir plusieurs champs identiques avec des informations différentes que je souhaite sérialiser en tant qu'objet pouvant être facilement itéré plus tard pour générer le CV.
Je ne sais pas si c'est la meilleure approche, mais vous pouvez obtenir la structure souhaitée comme ceci:
<form id="formCV" action="">
<div id="educationContainer">
<!-- First Group -->
<div class="education">
<div>
<input type="text" name="institutionName" value="Harvard">
</div>
<div>
<input type="text" name="courseName" value="Web Development">
</div>
<div>
<input type="month" name="startDate" value="2000-11">
</div>
<div>
<input type="month" name="endDate" value="2008-11">
</div>
</div>
<!-- Second Group -->
<div class="education">
<div>
<input type="text" name="institutionName" value="Oxford">
</div>
<div>
<input type="text" name="courseName" value="Business Management">
</div>
<div>
<input type="month" name="startDate" value="2009-10">
</div>
<div>
<input type="month" name="endDate" value="2010-05">
</div>
</div>
</div>
</form>
const formCV = document.querySelector('#formCV');
const formData = new FormData(formCV);
function groupEducationData(inputGroupSize = 4) {
const result = [];
let educationObj = null;
let counter = 0;
for (const entry of formData.entries()) {
// Since the counter is divisible by the number of inputs in a group
// only if one form group finishes. And when one form group finishes,
// we need to add the object into the result array
if (counter % inputGroupSize === 0) {
// if this is the first iteration, the educationObj is null and
// we don't want to add it to the result array yet
// we only add the educationObj to the result array if it is
// an object containing the education info
if (educationObj) result.push(educationObj);
// initialize the educationObj at the start
// and after one form finishes
educationObj = {};
}
// add entry[0] as key to the object (e.g. 'institutionName')
// with the value of entry[1] (e.g. 'Harvard')
educationObj[entry[0]] = entry[1];
counter++;
}
return result.concat(educationObj);
}
console.log(groupEducationData());
Pouvez-vous expliquer la logique de votre solution? J'ai du mal à le comprendre. Merci!
@Himad a mis à jour ma réponse avec quelques commentaires pour expliquer le raisonnement derrière. Mais je ne suis pas très doué pour expliquer, s'il y a des endroits pas clairs, faites-le moi savoir afin que je puisse l'expliquer davantage.
C'est également un moyen de renseigner les données au format souhaité.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="formCV" action="">
<div id="educationContainer">
<!-- First Group -->
<div class="education">
<div>
<input type="text" name="institutionName">
</div>
<div>
<input type="text" name="courseName">
</div>
<div>
<input type="month" name="startDate">
</div>
<div>
<input type="month" name="endDate">
</div>
</div>
<!-- Second Group -->
<div class="education">
<div>
<input type="text" name="institutionName">
</div>
<div>
<input type="text" name="courseName">
</div>
<div>
<input type="month" name="startDate">
</div>
<div>
<input type="month" name="endDate">
</div>
</div>
</div>
<input type="button" value="click me"/>
</form>
</body>
</html>
$(document).ready(function(){
$(":button").click(function(){
var educations=$("#formCV .education");
var data=[];
educations.each(function(i,education){
var set={}
$(education).find(":input").each(function(i,value){
set[$(value).attr("name")] = $(value).val();
});
data.push(set);
})
console.log("data",data)
});
});