Tips for storing user input in an array

Question

Tips for storing user input in an array

I have a question about adding data to an array from a table of input boxes. Here's the code I've been working on to achieve this:

Click here to view the code

Whenever I click the add button, I want the data to be stored in the variable named my_data.

The desired output in my variable should look like this:

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

If I were to add another set of data, it should append to the variable and result in 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"}]

My current code is not efficient, so any help would be appreciated.

Current output: 1, 4, 6, 4, 1

javascript arrays json

Answer 1

Answer №1

To iterate through all the textboxes, you can use the following code snippet:

function addItem(event) {
    var item = {};

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

Here, itemList is a global container for your items and #addItem refers to your form.

Check out the updated jsfiddle link.

If you include a form and a submit button, you can also provide a non-JavaScript method for adding information, ensuring accessibility for users with JavaScript disabled.

Answer 2

To iterate through all the textboxes, you can use the following code snippet:

function addItem(event) {
    var item = {};

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

Here, itemList is a global container for your items and #addItem refers to your form.

Check out the updated jsfiddle link.

If you include a form and a submit button, you can also provide a non-JavaScript method for adding information, ensuring accessibility for users with JavaScript disabled.

Answer 3

Answer №2

Check out this modified form for better functionality:

HTML:

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

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

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

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

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

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

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

Javascript:

$(document).ready(function() {

    var plank_data = Array();

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

        // Data validation
        $('#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);

        // 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;
    });
});

Answer 4

Check out this modified form for better functionality:

HTML:

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

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

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

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

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

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

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

Javascript:

$(document).ready(function() {

    var plank_data = Array();

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

        // Data validation
        $('#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);

        // 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;
    });
});

Answer 5

Answer №3

Loop through each key in my_data and combine the values. (Code is not tested)

const sum = {};

for(let i = 0; i < myData.length; i++) {
  let jsonData = myData[i];
  
  for(let key in jsonData) {
    if(jsonData.hasOwnProperty(key)) {
      if(key in sum) {
        sum[key] += jsonData[key];
      } else {
        sum[key] = jsonData[key];
      }
    }
  }
}

Answer 6

Loop through each key in my_data and combine the values. (Code is not tested)

const sum = {};

for(let i = 0; i < myData.length; i++) {
  let jsonData = myData[i];
  
  for(let key in jsonData) {
    if(jsonData.hasOwnProperty(key)) {
      if(key in sum) {
        sum[key] += jsonData[key];
      } else {
        sum[key] = jsonData[key];
      }
    }
  }
}

Answer 7

Answer №4

To add elements to a JavaScript array, you can utilize the array push function in JavaScript:

var originalArray = [{item:"apple", quantity:20}, {item:"banana", quantity:15}];

var itemsToAdd = [{item:"orange", quantity:10}, {item:"grape", quantity:12}];

originalArray = originalArray.concat(itemsToAdd);

Answer 8

To add elements to a JavaScript array, you can utilize the array push function in JavaScript:

var originalArray = [{item:"apple", quantity:20}, {item:"banana", quantity:15}];

var itemsToAdd = [{item:"orange", quantity:10}, {item:"grape", quantity:12}];

originalArray = originalArray.concat(itemsToAdd);

Answer 9

Answer №5

Apologies, I only briefly looked at the alternative answers.

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

Answer 10

Apologies, I only briefly looked at the alternative answers.

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

Tips for storing user input in an array

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Passing parameters in a callback function using $.getJSON in Javascript

Having trouble with the Post Request feature as an error message pops up saying "unable to post /addstudent/add"

What are some strategies for containing elements within a parent div to prevent them from overflowing when new elements are dynamically added

Exploring the functionalities of the Chrome Web Store with WebdriverJS

Automatically numbering text boxes upon pressing the enter key

Reposition div when clicked

What is the default delay when utilizing the $timeout function in AngularJS?

Arrange Bootstrap-Vue table in a custom order of days (mon, tue, wed) instead of the default

Error: The variable "context" has not been defined

How can I access attribute type information in a Node.js Sequelize model?

Having trouble retrieving data from nested struct fields

Creating an Angular JS controller that utilizes a filter for a JSON array of objects

The issue arises when using Hive Serde with an Array of Structures where the JSON Array is unable to be converted to a Java Object Array

What steps can I take to create a textbox that expands as more text is

Encountering access violation when excessively calling boost::property_tree::read_json is causing issues

Using ng-repeat can cause conflicts with jQuery function calls

Firing a custom jQuery event when a page loaded via AJAX is complete, ensuring it is triggered

How to adjust a vertex's position after it has been rendered in three.js

Mongoose issue with updating a field within a subarray object

I am unable to utilize the backspace function within a text box generated by JavaScript