Retrieving an array value by key from user input in HTML

Question

Retrieving an array value by key from user input in HTML

<input type='number' name="productId" id="productId" value="5">
<input type="number" name="quantity[]" id="quantity">

In order to retrieve the quantity value, I utilized

 var values = $("input[name='quantity[]']")
            .map(function(){return $(this).val();}).get();

The process functions smoothly to retrieve the desired value. Now, my objective is to designate productId as the key and the quantity values as numbers. The interface includes a submit button. Upon entering the product ID and quantity, the values will be added to an array. I aim to store these in a new array structured as follows:

var array = {
     2:10,
     3:5
};

javascript arrays key

Answer 1

Answer №1

When the window loads, a function called defineLogic is defined and assigned to the window.onload event. Inside the defineLogic function, an empty object named obj is created. Another function called createArray is defined within the defineLogic function. This function sets an onclick event listener on an element with the id "submit" and calls the createArray function when clicked.
 
The createArray function retrieves the values of two input elements with ids "productId" and "quantity" and stores them in the obj object. The obj object is then converted to a JSON string and logged to the console.

HTML input elements for productId, quantity, and a submit button are included in the code block.

<input type='number' name="productId" id="productId" value="5">
<input type="number" name="quantity[]" id="quantity">
<button id="submit">Submit button</button>

Answer 2

When the window loads, a function called defineLogic is defined and assigned to the window.onload event. Inside the defineLogic function, an empty object named obj is created. Another function called createArray is defined within the defineLogic function. This function sets an onclick event listener on an element with the id "submit" and calls the createArray function when clicked.
 
The createArray function retrieves the values of two input elements with ids "productId" and "quantity" and stores them in the obj object. The obj object is then converted to a JSON string and logged to the console.

HTML input elements for productId, quantity, and a submit button are included in the code block.

<input type='number' name="productId" id="productId" value="5">
<input type="number" name="quantity[]" id="quantity">
<button id="submit">Submit button</button>

Answer 3

Answer №2

let items = [];
function addItem(){  
  let itemId = $('#itemId').val();
  let amount = $('#amount').val();
  let item = {};
  
  if(items.filter(i=>i[itemId]).length > 0){ 
      alert('The item ' + itemId + ' is already in the list');
      return false;
  }

  item[itemId] = amount; 
  items.push(item);
  
  console.log(items);
  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form>
  <input type='number' name="itemId" id="itemId" value="5">
  <input type="number" name="amount[]" id="amount" value="10">
  <button onclick="return addItem()">Add item</button>
</form>

Answer 4

let items = [];
function addItem(){  
  let itemId = $('#itemId').val();
  let amount = $('#amount').val();
  let item = {};
  
  if(items.filter(i=>i[itemId]).length > 0){ 
      alert('The item ' + itemId + ' is already in the list');
      return false;
  }

  item[itemId] = amount; 
  items.push(item);
  
  console.log(items);
  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form>
  <input type='number' name="itemId" id="itemId" value="5">
  <input type="number" name="amount[]" id="amount" value="10">
  <button onclick="return addItem()">Add item</button>
</form>

Answer 5

Answer №3

In order to retrieve the inputs, you will need a selector. If you are confident that the inputs are arranged correctly in the document and in pairs, you can use the following method:

function gatherData() {
  var inputElements = document.querySelectorAll('input');
  return {[inputElements[0].value] : inputElements[1].value};
};

<input type='text' name="productName" id="productName" value="Apple">
<input type='number' name="quantity[]" id="quantity" value="3">
<br>
<button onclick="console.log(gatherData())">Retrieve Data</button>

This function can easily be modified to generate an object from any number of input pairs.

Answer 6

In order to retrieve the inputs, you will need a selector. If you are confident that the inputs are arranged correctly in the document and in pairs, you can use the following method:

function gatherData() {
  var inputElements = document.querySelectorAll('input');
  return {[inputElements[0].value] : inputElements[1].value};
};

<input type='text' name="productName" id="productName" value="Apple">
<input type='number' name="quantity[]" id="quantity" value="3">
<br>
<button onclick="console.log(gatherData())">Retrieve Data</button>

This function can easily be modified to generate an object from any number of input pairs.

Retrieving an array value by key from user input in HTML

Answer №1

Answer №2

Answer №3

Similar questions

Magnific Popup displaying only the initial item

Looking to remove a row with php, html, and ajax?

When hosted, OpenCart encounters a JavaScript error stating that the property "document" cannot be read because it is null

What could be the reason for my reset function not halting?

Can you elaborate on this specific JavaScript concept?

Preserve the height of the previous div following an AJAX request

What could be causing my asynchronous JavaScript/Node.js function to bypass a significant portion of the code?

How can I simply show a specific value from an object in Vue?

How come the link function of my directive isn't being triggered?

You are unable to assign a string value instead of an object when making multiple selections

The entire Sphere Geometry in three.js is not completely encompassed by the texture

How can I easily move from a shared page to a specific page in Angular 8?

Jquery feature to automatically hide the submit button

Is it possible to activate events on select tags even when they have the disabled attribute?

When I submit 'name' through Postman, ValidatorExpress notifies me that the input for 'name' is missing

The Katura video is loading properly, yet it is rotating instead of playing

Trigger Element Upon Click

Discover a suitable option or craft one using Mongoose

incorporating a dynamic parameter into the payload of an AJAX post request

Issue with transition delays on specific elements within a containing element