Adding objects to an array via user input

Question

I'm to make a form where the user has two "activities" to chose from. This information is then going to be saved along with some personal info to then later list the different individuals who signed up below each respective activity. Though I'd also like to make a form where i can add more activities to this list of options, visible to the user. I'm just not sure how to go about this. I've created an array with the different activities inside but since I can't hard code it in but instead need to generate new objects with the given "admin form" I'm stuck. Where do I go from here?

This is my array so far:

var sport = [
  {
     id:1,
     Name:"Fotboll",
     Place:{lat:59.999999, long: 17.99999},
     Val:[{id:1, plats:"indoors"},{id:2, plats:"outdoors"}]
  },
  {
     id:2,
     Name:"Tennis",
     Place:{lat:59.88888, long: 17.88888},
     Val:[{id:1, plats:"indoors"},{id:2, plats:"outdoors"}]
   }
];

Nick · Accepted Answer · 2017-10-26 18:41:15Z

1

Here's an example of a basic form that implements the requested logic. Note that you may have to change some form elements to make it work, but this should meet your needs.

var myActivities = [];

document.querySelector('form button').addEventListener('click', function(event) {

  var inputs = document.querySelectorAll('form input');
  var newActivity = {};
  for (var i = 0; i < inputs.length; i++) {
    newActivity[inputs[i].name] = inputs[i].value;
    inputs[i].value = '';
  }
  myActivities.push(newActivity);
  console.log(myActivities);
  event.preventDefault();

}, false);

<form>
  <input type="text" name="name" value="" placeholder="Name" /><br />
  <input type="text" name="input2" value="" placeholder="Input 2" /><br />
  <input type="text" name="input3" value="" placeholder="Input 3" /><br />
  <input type="text" name="input4" value="" placeholder="Input 4" /><br />
  <button>Add</button>
</form>

answered Oct 26, 2017 at 18:41

Nick

16.7k3 gold badges21 silver badges38 bronze badges

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

1 Comment

Anton Andersson Over a year ago

I'm getting "Uncaught TypeError: Cannot read property 'addEventListener' of null". Can't wrap my head around this. I've defined the HTML element both with queryselector and creating a variable but none works. I've also tried multiple event-types. Why does this ouccur?

Collectives™ on Stack Overflow

Adding objects to an array via user input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related