How to get name and name key from input that have array name

Question

here is html inputs :

<input name="item[5689]" type="text" value="abcdefgh"></input>
<input name="item[6535]" type="text" value="abcd1"></input>
<input name="item[9856]" type="text" value="abcd"></input>

So need this type of array for post ajax call :

5689 => abcdefgh
6535 => abcd1
9856 => abcd

How it can be achieved by jquery ?

here I try but not success :

$("input[name='item[^]']").each(function() {
  console.log("Name: " + this.name + ", index: " + $(this).index());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="item[5689]" type="text" value="abcdefgh"></input>
<input name="item[6535]" type="text" value="abcd1"></input>
<input name="item[9856]" type="text" value="abcd"></input>

Could you please elaborate further on the expected result? You have what looks like a PHP associative array but how do you want that to look in JS? An object like `{"5689": "abcdegh", "6535": "abcd1", "9856": "abcd"}`? — Phil, Aug 05 '21 at 07:15
I need to post data to php side so I need keys and values to store in DB — Lara Vux, Aug 05 '21 at 07:39
Could you please edit your question to show _exactly_ what format you need to send in the request? — Phil, Aug 05 '21 at 07:41
Try put it in form and than try use serializeArray on form element https://www.w3schools.com/jquery/ajax_serializearray.asp — rad11, Aug 05 '21 at 08:01

Phil · Accepted Answer · 2021-08-05T07:19:14.993

Unfortunately there's no attribute matches expression selector so your best option is to...

Find all the elements (by attribute starts-with selector)
Filter them to make sure they match the expected format
Extract the input value and key from the name and map them to entries
Reduce that to the object result you want

const rx = /^item\[(.+?)]$/

const result = Object.fromEntries(
  jQuery("input[name^='item[']")
    .filter((_, { name }) => rx.test(name))
    .map((_, { name, value }) => [[ name.match(rx)[1], value ]])
    .get())
    
console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="item[5689]" type="text" value="abcdefgh">
<input name="item[6535]" type="text" value="abcd1">
<input name="item[9856]" type="text" value="abcd">

jQuery's .map() appears to flatten the array, hence the [[...]] which makes it suitable for Object.fromEntries()

score 0 · Answer 2 · answered Aug 05 '21 at 07:15

Simpler answer without Regex.

first find all the inputs with name that contains []

via [name*=] notation. then iterate over the tags and take the substring

between [ & ] characters of the name and last get the value via

.val() method (not index() that will give you the index not the value)

$("input[name*='item[']").each(function() {
  console.log("Name: " + this.name.substring(
    this.name.lastIndexOf("[") + 1, this.name.lastIndexOf("]")) + ", index: " + $(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="item[5689]" type="text" value="abcdefgh"></input>
<input name="item[6535]" type="text" value="abcd1"></input>
<input name="item[9856]" type="text" value="abcd"></input>

How to get name and name key from input that have array name

2 Answers2