Using a Form to Create an Object That's Pushed Into an Array

Question

I have an array:

var array = [
    {id: "X", numberA: 1, numberB: 2, dif: 1},
    {id: "Y", numberA: 2, numberB: 3, dif: 1},
    {id: "Z", numberA: 3, numberB: 5, dif: 2},
]

I also have a form:

<form id="agenda_form">
    <p>ID</p>
    <input type="text" id="id">
    <p>Start<p>
    <input type="number" id="numberA">
    <p>End</p>
    <input type="number" id="numberB">
    <input type="submit" value="Submit" id="submitForm">
</form>

I'm trying to use that form to create an object and push that object into my array. Dif I can calculate by subtracting numberB from number A.

I've tried with jQuery and .val() but can't seem to figure it out. How would I do this?

Thank you!

I tried a version of Will's example from below. The submit button wasn't working and with his it's still not working. I'll try the other answer too. — ObbyOss
– ObbyOss, Commented Mar 2, 2015 at 2:32
Please add what you've tried to your post. That will help us diagnose your issue. — Sumner Evans
– Sumner Evans, Commented Mar 2, 2015 at 2:38
jsve - Got it to work! The issue was actually outside of the push method. It was caused by something else I was attempting. Thanks though! — ObbyOss
– ObbyOss, Commented Mar 2, 2015 at 2:41

Will Reese · Accepted Answer · 2015-03-02 01:39:54Z

3

How about something like this?

var array = [
    {id: "X", numberA: 1, numberB: 2, dif: 1},
    {id: "Y", numberA: 2, numberB: 3, dif: 1},
    {id: "Z", numberA: 3, numberB: 5, dif: 2},
]

$("#agenda_form").on("submit", function(e) {
  
  var numA = $("#numberA").val(),
      numB = $("#numberB").val();
  
  var obj = {
    id: "", //whatever you need,
    numberA: numA,
    numberB: numB,
    dif: numB - numA
  };
  
  array.push(obj);
  
  //Prevent page from submitting
  return false;
  
});

answered Mar 2, 2015 at 1:39

Will Reese

2,8512 gold badges17 silver badges28 bronze badges

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

Comments

Norlihazmey Ghazali · Accepted Answer · 2015-03-02 01:42:53Z

Try this one.Put this into your page.

HTML CODE

<form id="agenda_form">
<p>ID</p>
<input type="text" id="id">
<p>Start<p>
<input type="number" id="numberA">
<p>End</p>
<input type="number" id="numberB">
<input type="button" value="Submit" id="submitForm">
</form>

JS CODE

$(document).ready(function() {
var array = [
{id: "X", numberA: 1, numberB: 2, dif: 1},
{id: "Y", numberA: 2, numberB: 3, dif: 1},
{id: "Z", numberA: 3, numberB: 5, dif: 2},
];

$('#submitForm').on('click', function(){
  var id = $('#id'),
  numberA = $('#numberA'),
  numberB = $('#numberB');

 var k =  {id:'', numberA: '', numberB: '', dif: ''};
  k.id = id.val();
  k.numberA = numberA.val();
  k.numberB = numberB.val();
  k.dif = parseInt(k.numberB) - parseInt(k.numberA);
  array.push(k);

 });
});

Collectives™ on Stack Overflow

Using a Form to Create an Object That's Pushed Into an Array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related