I'm familiar with JavaScript, but not familiar with using it in the DOM. I'm trying to make a form that will accept an item name + properties and store it like I'm writing out the object below:

var grocery_list = {
  "Banana": { category: "produce", price: 5.99 },
  "Chocolate": { category: "candy", price: 2.75 },
  "Wheat Bread": { category: "grains and breads", price: 2.99 }
}

Here is the sample HTML Form I have:

  <form>
    <input name="item"><br>
    <input name="category"><br>
    <input name="price"><br>
    <input type="submit" value="do stuff">
  </form>

How can I use JavaScript take the input above and push it to an Object (like above)?

I'm familiar with JavaScript, but not familiar with using it in the DOM. I'm trying to make a form that will accept an item name + properties and store it like I'm writing out the object below:

var grocery_list = {
  "Banana": { category: "produce", price: 5.99 },
  "Chocolate": { category: "candy", price: 2.75 },
  "Wheat Bread": { category: "grains and breads", price: 2.99 }
}

Here is the sample HTML Form I have:

  <form>
    <input name="item"><br>
    <input name="category"><br>
    <input name="price"><br>
    <input type="submit" value="do stuff">
  </form>

How can I use JavaScript take the input above and push it to an Object (like above)?

• javascript
• forms
• dom

• You should use a submit listener that gets the values from the inputs, constructs the required object and adds it the the grocery_list. Then cancel submit. You could also use a plain button and put the listener on the button. – RobG Commented Dec 3, 2014 at 6:50
• @RobG Would that be a JQuery thing? – hummmingbear Commented Dec 3, 2014 at 6:54
• No. You could use jQuery, but it doesn't add any value here. – RobG Commented Dec 3, 2014 at 7:00

2 Answers 2

Add a listener to the form, collect the values, build an object and add it to the grocery_list, e.g.

<script>
var grocery_list = {}

function addGroceryItem(form) {
  grocery_list[form.item.value] = {category: form.category.value, price: form.price.value};
  return false;
}
</script>

<form onsubmit="return addGroceryItem(this)">
    <input name="item"><br>
    <input name="category"><br>
    <input name="price"><br>
    <input type="submit" value="Add item">
    <input type="button" value="Show list" onclick="console.log(grocery_list)">
</form>

Though I'd be tempted to use a plain button, not a submit button, and put the listener on the button's onclick handler.

This could be easily done with jQuery:

var objects = [];
$('form').on('submit', function(e){
    var item = $('#item').val(), category = $('#category').val(), price = $('#price').val();
    objects.push({item:{'category':category, 'price':parseFloat(price)}});
    console.log(JSON.stringify(objects));
    e.preventDefault();
});

By listenting to a submit event on the form, populating the object and pushing it to an object array. about reading the values from DOM, see the $('#input_id').val() which takes these values.

Assuming you though about pure JS, this could also be done:

var objects = [];
var form = document.getElementById('form');
form.onsubmit = function(e){
    var item = document.getElementById('item').value, category =document.getElementById('category').value, price = document.getElementById('price').value;
    objects.push({item:{'category':category, 'price':parseFloat(price)}});
    console.log(JSON.stringify(objects));
    e.preventDefault();
}

http://jsfiddle/70fnct9c/

UPDATE as robg noted, storing the objects in an object instead of array could also be done easily:

var objects = {}
................
................
objects[item] = {'category':category, 'price':parseFloat(price)}

http://jsfiddle/70fnct9c/2/