how to add the input values in an array

Question

i just like to ask regarding adding data in a array. But the data which i wanted to put is from a table of input boxes.. Here's the code that i've been practicing to get data:

http://jsfiddle.net/yajeig/4Nr9m/69/

I have an add button that everytime I click that button, it will store data in my_data variable.

i want to produce an output in my variable something like this:

my_data  = [ {plank:"1",thickness:"4",width:"6",length:"8",qty:"1",brdFt:"16"}]

and if i would add another data again, it will add in that variable and it be something like this:

my_data  = [ {plank:"1",thickness:"4",width:"6",length:"8",qty:"1",brdFt:"16"},
     {plank:"2",thickness:"5",width:"6",length:"2",qty:"1",brdFt:"50"}]

the code that i have right now is really bad, so please help.

Currently my output: 1,4,6,4,1

Fiddles that spam you with a bunch of alerts on load are annoying. — ThiefMaster
– ThiefMaster, Commented Jul 15, 2011 at 6:30

detaylor · Accepted Answer · 2011-07-15 06:13:37Z

1

You should be able to iterate over all of the textboxes using the following:

function add(e) {
    var obj = {};

    $('#addItem input[type="text"]')
        .each(function(){obj[this.name] = this.value;});
    myItems.push(obj);
}

Where myItems is a global container for your items and #addItem is your form.

Updated jsfiddle.

If you use a form and a submit button then you should be able to implement a non-JavaScript method to add your information so that the site will be accessible to people without JavaScript enabled.

edited Jul 15, 2011 at 6:13

answered Jul 15, 2011 at 5:34

detaylor

7,3001 gold badge29 silver badges46 bronze badges

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

2 Comments

jayAnn Over a year ago

very nice. It greatly works, but i just wondering how to get that "Test":"" and get rid of it..

detaylor Over a year ago

@jayAnn: I have updated my answer to iterate over each textbox in the form. It should produce the result that you want. The jsFiddle has also been updated.

Anthony Simmon · Accepted Answer · 2011-07-15 21:26:48Z

1

Try this, sorry for modifying your form, but it works well:

HTML:

<form method="post" action="#" id="add_plank_form">
    <p><label for="plank_number">Plank number</label>
    <p><input type="text" name="plank_number" id="plank_number"/></p>

    <p><label for="plank_width">Width</label>
    <p><input type="text" name="plank_width" id="plank_width"/></p>

    <p><label for="plank_length">Length</label>
    <p><input type="text" name="plank_length" id="plank_length"/></p>

    <p><label for="plank_thickness">Thickness</label>
    <p><input type="text" name="plank_thickness" id="plank_thickness"/></p>

    <p><label for="plank_quantity">Quantity</label>
    <p><input type="text" name="plank_quantity" id="plank_quantity"/></p>

    <p><input type="submit" value="Add"/>
</form>

<p id="add_plank_result"></p>

Javascript:

$(document).ready(function() {

    var plank_data = Array();

    $('#add_plank_form').submit(function() {

        // Checking data
        $('#add_plank_form input[type="text"]').each(function() {
            if(isNaN(parseInt($(this).val()))) {
                return false;
            }
        });

        var added_data = Array();
        added_data.push(parseInt($('#plank_number').val()));
        added_data.push(parseInt($('#plank_width').val()));
        added_data.push(parseInt($('#plank_length').val()));
        added_data.push(parseInt($('#plank_thickness').val()));
        added_data.push(parseInt($('#plank_quantity').val()));

        $('#add_plank_form input[type="text"]').val('');

        plank_data.push(added_data);

        // alert(JSON.stringify(plank_data));

        // compute L x W x F for each plank data
        var computed_values = Array();
        $('#add_plank_result').html('');
        for(var i=0; i<plank_data.length; i++) {
            computed_values.push(plank_data[i][1] * plank_data[i][2] * plank_data[i][3] / 12);
            $('#add_plank_result').append('<input type="text" name="plank_add[]" value="' + computed_values[i] + '"/>');
        }

        return false;
    });
});

edited Jul 15, 2011 at 21:26

answered Jul 15, 2011 at 6:28

Anthony Simmon

1,61713 silver badges26 bronze badges

4 Comments

jayAnn Over a year ago

but i was just wondering how to add an input box with a value from a result of the above datas. I want to have board foot at the end of the end, which is computed as l x w x f / 12. I was in this problem right now

Anthony Simmon Over a year ago

How to compute the value if there is several plank information in the array? I mean, if the data is [{1, 2, 3, 4, 5}, {7, 8, 9, 4, 4}], the computed value will be [2, 24]?

jayAnn Over a year ago

no, not that. I want to add the board foot computation in my json.. It's something like this: [{"plank_no":"1","thickness":"4","width":"6","length_t":"8","qty":"7","board_ft":"16"}]. And I want to thank you for really helping me in this.

jayAnn Over a year ago

I already get it now. By the way AsKaiser, you're previous code really help me. That is what im using right now, but mine is still inside a table :). Thank you again.

Ming-Tang · Accepted Answer · 2011-07-15 05:18:08Z

0

Iterate through all keys, and add the values. (code written from mind, not tested)

var added = { };
for (var i = 0; i < my_data.length; i ++) {
  var json = my_data[i];
  for (var key in json) {
    if (json.hasOwnProperty(key)) {
      if (key in added) {
        added[key] += json[key];
      } else {
        added[key] = json[key];
      }
    }
  }
}

answered Jul 15, 2011 at 5:18

Ming-Tang

17.7k8 gold badges40 silver badges78 bronze badges

Comments

Anthony Simmon · Accepted Answer · 2011-07-15 05:21:12Z

0

You can use the javascript array push function :

var data = [{plank:"1",thickness:"4",width:"6",length:"8",qty:"1",brdFt:"16"}];

var to_add = [{plank:"2",thickness:"5",width:"6",length:"2",qty:"1",brdFt:"50"}];

data = data.concat(to_add);

answered Jul 15, 2011 at 5:21

Anthony Simmon

1,61713 silver badges26 bronze badges

1 Comment

jayAnn Over a year ago

thanks for the answer but I still can't use it cause I still dont know how to from my output as a json. Maybe Im gonna use this one once I can have a json output. The output I currently have right now is ` 1,4,6,4,1`.

mplungjan · Accepted Answer · 2011-07-15 05:58:40Z

0

Sorry I only glanced at the other solutions.

$(document).ready(function() {
 var myData=[];
    var myObject = {} 
        $("input").each(function() {
            myObject[this.id]=this.value
        });
     alert(myObject["plank"])
   myData.push(myObject)
});

answered Jul 15, 2011 at 5:58

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Collectives™ on Stack Overflow

how to add the input values in an array

5 Answers 5

2 Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related