Comment conserver le formulaire HTML input comme Objet JavaScript

Je suis en auto-apprentissage JS et de travailler sur un exercice qui prend en entrée de l'utilisateur(prénom, deuxième prénom, Nom), et enregistre l'entrée dans un JS Objet (plus Tard, je vais manipuler l'objet lui-même et à les trier, vérifier les doublons, etc.)

J'ai cherché partout et impossible de trouver n'importe quelle direction sur celui-ci. Je suis familier avec l'économie d'entrée HTML en tant que variables (var n=document.getElementById('x').valeur), mais je suis très nouveau pour les objets.

Comment puis-je enregistrer la saisie de l'utilisateur dans les objets? Et puis-je enregistrer des multiples "soumissions" dans l'Objet que dans 'la charge de l'objet de la saisie de l'utilisateur", et puis de le manipuler sur une étape ultérieure?

HTML:

<body>
  <label>First Name:
    <input type='text' name='firstName' id='firstName' placeholder="First Name">
  </label>
  <br>
  <br>
  <label>Middle Name:
    <input type='text' name='middleName' id='middleName' placeholder="Middle Name">
  </label>
  <br>
  <br>
  <label>Last Name:
    <input type='text' name='lastName' id='lastName' placeholder="Last Name">
  </label>
  <br>
  <br>
  <button type="button" onclick="buildList()">Add to List</button>
</body>

Ce que j'imagine la JS Objet ressembler, et à chaque fois que l'utilisateur appuie sur "Ajouter à la Liste', le programme ajoute une autre Première/Moyen/Dernier nom de la liste.:

var list = {
    firstName:"John",
    middleName:"Will",
    lastName:"Doe"
},
{
    firstName:"Ben",
    middleName:"Thomas",
    lastName:"Smith"
},
{
    firstName:"Brooke",
    middleName:"James",
    lastName:"Kanter"
};

***Note, plus tard, j'ai l'intention de compter la fréquence de chaque Première/Milieu/Nom de famille et de sortie sur l'écran.. c'est à dire: 'FirstName'Jason: 2, 'FirstName'Ed:3; 'MiddleName'Marie:5; 'LastName'Smith:3'

Mon objectif: Créer une liste de noms. Les casser en trois listes: la première, au milieu, et les noms de famille. Compter la fréquence des noms dans chaque liste. ---J'ai pensé que l'utilisation d'un objet serait la meilleure façon de le faire.

quelque chose comme cela? jsbin.com/vaxulusoma/edit?html,js,console,sortie
bon code, mais vous n'avez pas besoin de sauvegarder les objets cachés entrée, vous pouvez utiliser une variable globale.
Je suis conscient de cela, mais vu que l'OP avait de la difficulté à comprendre d'où/comment enregistrer des données côté client, j'ai voulu faire ce que effacer/simple que possible. Merci bien
Oui!! Juste comme ça!! Merci beaucoup pour l'écriture qui et de me montrer comment il fonctionne. Maintenant j'ai juste besoin de l'examiner et de comprendre comment et pourquoi il fonctionne afin que je puisse maître comme vous l'avez fait!! Im sûr que c'est très simple une fois que l'on obtient le jist de. Merci beaucoup!
Qu'entendez-vous par " caché d'entrée?' merci!!

OriginalL'auteur jward01 | 2015-07-10

Objets Js sont très faciles à manipuler (ce qui à de nombreuses reprises la rend vulnérable à plus d'erreurs). Si vous souhaitez ajouter une propriété viens de mettre un peu de valeur sur elle.

var info = {};//create an empty object
info.firstName = document.getElementById('firstName').value;
info.lastName = document.getElementById('lastName').value;
allInfo.push(info);//you had to initialize the array before

OriginalL'auteur Mark E

0

Si votre objectif est de cartographier la fréquence de chaque nom, à l'aide de trois hachages pourrait être l'option la plus efficace. Comme un exemple pour juste l'une des entrées:
```
var firstNames = {};

function setFirstName(firstName){

    if(firstNames[firstName] === undefined){
        firstNames[firstName] = 1;
        return;
    }
    firstNames[firstName]++;
}

function buildList(){

    setFirstName(document.getElementById('firstName').value);

}
```
De cette façon, vous obtiendrez quelque chose comme var firstNames = {tom: 3, dick: 10, harry: 2, ...}. Voici un violon: https://jsfiddle.net/n3yhu6as/2/

OriginalL'auteur Ryan Neuffer
0

Vous pouvez créer un objet à partir d'entrées (comme ils regardent dans balisage), comme:
```
function buildList(){
        var list = {};
        $("body").find("input").each(function() {

            var field= $(this).attr('id');
            var value= $(this).val();
            list[field] = value;
        });
}
```
violon.

Dans son application, ce serait de remplacer le prénom valeur de la propriété chaque fois que le bouton a été pressé-plutôt que de l'ajouter à une liste et le maintien d'un décompte.

OriginalL'auteur Adib Aroui

Il y a une différence entre [] et {}

La push() méthode et longueur propriété est uniquement applicable aux [], car il fait le tableau JavaScript

Donc dans votre cas vous devriez mettre votre Objet JSON à l'intérieur d'un Tableau JSON

var list = [{
    firstName:"John",
    middleName:"Will",
    lastName:"Doe"
},
{
    firstName:"Ben",
    middleName:"Thomas",
    lastName:"Smith"
},
{
    firstName:"Brooke",
    middleName:"James",
    lastName:"Kanter"
}];

Si vous aimez ceci, alors vous n'code dans l'événement clic du bouton comme

list.push({
    firstName: document.getElementById("firstName").value,
    middleName: document.getElementById("middleName").value,
    lastName: document.getElementById("lastName").value
});

OriginalL'auteur Zigma Empire

Vous devez vous connecter pour publier un commentaire.