How to set the input value to be a object's property's value in javascript

Question

I want to set the input value to be a object's property's value, here is the code in jsfiddle,
I also put the code here:
html

<div id="contenu"></div>

js

// create the button
var contenu = document.getElementById("contenu");
var btn = document.createElement("button");
btn.textContent = "add";
contenu.appendChild(btn);

// click the button to create 2 inputs and submit
btn.addEventListener("click", function(){
    // create 2 inputs and submit
    var name = document.createElement("input");
    name.placeholder = "enter a name";
    var age = document.createElement("input");
    age.placeholder = "enter the age";
    var submit = document.createElement("input");
    submit.type = "submit";
    submit.value = "submit";
    var form = document.createElement("form");
    form.method = "post";
    form.appendChild(name);
    form.appendChild(age);
    form.appendChild(submit);
    contenu.appendChild(form);

    // create a new empty table
    var newTable = [];
    var newObject = {};
    newObject.name = name.value;//"Tom" will work
    newObject.age = age.value;//20 will work
    newTable.push(newObject);

    // submit the form to show the input value in html
    form.addEventListener("submit", function(e){
        newTable.forEach(function(table){
            e.preventDefault();
            var pElt = document.createElement("p");
            pElt.innerHTML = table.name + " " + table.age;  
            contenu.appendChild(pElt);
        });   
    });
});

Objective: click the "add" button to show 2 inputs and the "submit" button, enter the name and the age, then click "submit" to show them in the div, I put the input's value as the property's value of the object, newObject.name = name.value; and newObject.age = age.value; but it dosen't work, thanks for your help!

andrewkodesgood · Accepted Answer · 2016-06-19 23:55:31Z

1

I fixed your fiddle, you can check it out here:

https://jsfiddle.net/o08mua1y/

    form.addEventListener("submit", function(e){
        newObject.name = name.value;//"Tom" will work
        newObject.age = age.value;//20 will work
        newTable.forEach(function(table){
            e.preventDefault();
            var pElt = document.createElement("p");
            pElt.innerHTML = table.name + " " + table.age;  
            contenu.appendChild(pElt);
        });   
    });

The issue is that you are trying to set the value of the name, and age field in the listener that creates your input fields, not in the listener that fires on submission of the inputs. If you set those values inside the submit listener, before the forEach loop the values will be set, and be displayed in your HTML as intended

answered Jun 19, 2016 at 23:55

andrewkodesgood

1376 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jiang Lan Over a year ago

It works well! They're just not in the right place! If I want to set the value, it needs a trigger as you said, I understand now, thank you, your help is very useful for me!

andrewkodesgood Over a year ago

Yep you've got it, happy to help!

grateful · Accepted Answer · 2016-06-19 23:53:15Z

0

name and age do not have a value at the time that you create the newObject. You need to attach an event listener like keyup or keydown or change to the input field to fire a function to set the values in the object.

answered Jun 19, 2016 at 23:53

grateful

1,13814 silver badges25 bronze badges

1 Comment

Jiang Lan Over a year ago

Yes, you're right, it works when I set them into a eventListener, thanks for your help!

brandon · Accepted Answer · 2016-06-20 00:03:27Z

0

Not sure what you did there but this makes it work. Take a look.

// create de button
var contenu = document.getElementById("contenu");
var btn = document.createElement("button");
btn.textContent = "add";
contenu.appendChild(btn);

// click the button to create 2 inputs and submit
btn.addEventListener("click", function(){
// create 2 inputs and submit
var name = document.createElement("input");
name.placeholder = "enter a name";
var age = document.createElement("input");
age.placeholder = "enter the age";
var submit = document.createElement("input");
submit.type = "submit";
submit.value = "submit";
var form = document.createElement("form");
form.method = "post";
form.appendChild(name);
form.appendChild(age);
form.appendChild(submit);
contenu.appendChild(form);

// create a new empty table
var newTable = [];


// submit the form to show the input value in html
form.addEventListener("submit", function(e){
  var newObject = {};
  newObject.name = name.value;//"Tom" will work
  newObject.age = age.value;//20 will work
  newTable.push(newObject);
  var pElt = document.createElement("p");
  pElt.innerHTML = newObject.name + " " + newObject.age;  
  contenu.appendChild(pElt);   
  e.preventDefault();
});
});

answered Jun 20, 2016 at 0:03

brandon

5951 gold badge7 silver badges16 bronze badges

1 Comment

Jiang Lan Over a year ago

Your help is useful too, I'm learning javascript from a online course "OpenClassroom.com", when I am stuck, no teacher, so I come here looking for help, thanks

Collectives™ on Stack Overflow

How to set the input value to be a object's property's value in javascript

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related