How to query an Input Field, by var string name, to get the value?

Question

TL;DR: How to get an input field value by appending a number to a string?

I was trying to access an array value in jquery but it wouldn't let me reference it.

Next idea is to create 'hidden' input fields and try to get the value based upon the ProductID Number, aka 13 (that is the value from changing a drop down select list).

<input type='hidden' id='SFArray13' name='SFArray13' value='6'/>

    var ProductOptionValue = $('#ProductOptionID').find(":selected").val();
    $("#ProductOption_value").html(ProductOptionValue);  // = 13


var SFArrayProductOptionValue = "SFArray" + ProductOptionValue.toString(); // = "SFArray13"
var ProductSquareFeetFromHiddenValues = $("#SFArrayProductOptionValue").val();
$("#SquareFeetPerBox").val(ProductSquareFeetFromHiddenValues);

the var string: SFArrayProductOptionValue = "SFArray13"

I need to use it like this:

var ProductSquareFeetFromHiddenValues = $("#SFArray13").val();

but I don't know the syntax to be able to use the Product ID number and append it to the SFArray name so I can get the value of the ID input box.

user2314737 · Accepted Answer · 2025-06-09 21:04:02Z

You can simply use a string (I used a template string) like this:

// with template string in the selector:
var ProductSquareFeetFromHiddenValues = $(`#${SFArrayProductOptionValue}`).val();

// with regular string :
var ProductSquareFeetFromHiddenValues = $('#' + SFArrayProductOptionValue).val();

Demo:

/*var ProductOptionValue = $('#ProductOptionID').find(":selected").val();
$("#ProductOption_value").html(ProductOptionValue); */
var ProductOptionValue = 13;


var SFArrayProductOptionValue = "SFArray" + ProductOptionValue.toString(); // = "SFArray13"
console.log(`SFArrayProductOptionValue = ${SFArrayProductOptionValue}`);

// with template string in the selector:
var ProductSquareFeetFromHiddenValues = $(`#${SFArrayProductOptionValue}`).val();

console.log(`ProductSquareFeetFromHiddenValues = ${ProductSquareFeetFromHiddenValues}`);

// with regular string in the selector:
var ProductSquareFeetFromHiddenValues = $('#' + SFArrayProductOptionValue).val();

console.log(`ProductSquareFeetFromHiddenValues = ${ProductSquareFeetFromHiddenValues}`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input id='SFArray13' name='SFArray13' value='6'/>

Updating variable on input

var ProductOptionValue = 13;

var SFArrayProductOptionValue = "SFArray" + ProductOptionValue.toString(); // = "SFArray13"
console.log(`SFArrayProductOptionValue = ${SFArrayProductOptionValue}`);

// with template string in the selector:
var ProductSquareFeetFromHiddenValues = $(`#${SFArrayProductOptionValue}`).val();

console.log(`ProductSquareFeetFromHiddenValues = ${ProductSquareFeetFromHiddenValues}`);

// live update variable at input changes
$(`#${SFArrayProductOptionValue}`).on("input", () => {
  ProductSquareFeetFromHiddenValues = $(`#${SFArrayProductOptionValue}`).val();
  console.log(`ProductSquareFeetFromHiddenValues = ${ProductSquareFeetFromHiddenValues}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input id='SFArray13' name='SFArray13' value='6'/>

See also: jQuery: using a variable as a selector or jQuery selectors with variables.

Twisty · Accepted Answer · 2025-06-12 16:52:42Z

There are a number of ways to accomplish this. As you mentioned, you wanted to create an array, I thought to present an example using an array. You could also use an Object too if your IDs are more complex.

var SFArray = [
  20,
  18,
  16,
  14,
  12,
  10,
  8,
  6,
  4,
  2,
  1,
  3,
  5,
  7,
  9,
  11,
  13,
  15,
  17,
  19
];

$.each(SFArray, function(i, v) {
  $('#ProductOptionID').append($("<option>").html((i + 1)));
});

$('#ProductOptionID').change(function() {
  var ProductOptionValue = $("#ProductOptionID option:selected").index() - 1;
  console.log("ID: " + ProductOptionValue, SFArray[ProductOptionValue]);
  $("#SquareFeetPerBox").html(SFArray[ProductOptionValue]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<label for="">Select Product ID</label>
<select id="ProductOptionID">
  <option>-</option>
</select>
<div>SqFt Per Box: <span id="SquareFeetPerBox"></span></div>

Collectives™ on Stack Overflow

How to query an Input Field, by var string name, to get the value?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related