How To get Multidimensional Input Fields Array Index with JavaScript?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
This my sample HTML form with multidimensional input fields
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
Lets say I'm writing on ID diameter_bottom5 input. And onkeyup I need index of diameter of input field. In this example it would be 5.
I don't want to use regex or slice in name or id attribute.
I don't want to create custom attribute to store index.
How can get multidimensional input fields array index in which I'm currently typing using JavaScript?
javascript html arrays
edited Nov 15 '18 at 10:47
HynekS
5121515
asked Nov 15 '18 at 10:10
Faizan RupaniFaizan Rupani
306112
|
show 2 more comments
0
This my sample HTML form with multidimensional input fields
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
Lets say I'm writing on ID diameter_bottom5 input. And onkeyup I need index of diameter of input field. In this example it would be 5.
I don't want to use regex or slice in name or id attribute.
I don't want to create custom attribute to store index.
How can get multidimensional input fields array index in which I'm currently typing using JavaScript?
javascript html arrays
edited Nov 15 '18 at 10:47
HynekS
5121515
asked Nov 15 '18 at 10:10
Faizan RupaniFaizan Rupani
306112
indexes are hard coded ?
– Artyom Amiryan
Nov 15 '18 at 10:15
1
as your indexes are hardcoded, only option you have is to pick it from name or id attributes
– Artyom Amiryan
Nov 15 '18 at 10:22
1
create a data attribute at the same time as you are creating the id.... <input name="diameter[5][top]" type="text" data-index="5" .... then you can simply get the data attribute on the keyup
– gavgrif
Nov 15 '18 at 10:25
1
@FaizanRupani, if it would be dynamic, I would add an ` onkeyup` and will pass index to it's callback as argument
– Artyom Amiryan
Nov 15 '18 at 10:30
1
Thank you all I'm back to custom attributes.
– Faizan Rupani
Nov 15 '18 at 10:31
|
show 2 more comments
0
0
0
This my sample HTML form with multidimensional input fields
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
Lets say I'm writing on ID diameter_bottom5 input. And onkeyup I need index of diameter of input field. In this example it would be 5.
I don't want to use regex or slice in name or id attribute.
I don't want to create custom attribute to store index.
How can get multidimensional input fields array index in which I'm currently typing using JavaScript?
javascript html arrays
edited Nov 15 '18 at 10:47
HynekS
5121515
asked Nov 15 '18 at 10:10
Faizan RupaniFaizan Rupani
306112
This my sample HTML form with multidimensional input fields
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
Lets say I'm writing on ID diameter_bottom5 input. And onkeyup I need index of diameter of input field. In this example it would be 5.
I don't want to use regex or slice in name or id attribute.
I don't want to create custom attribute to store index.
How can get multidimensional input fields array index in which I'm currently typing using JavaScript?
javascript html arrays
javascript html arrays
edited Nov 15 '18 at 10:47
HynekS
5121515
asked Nov 15 '18 at 10:10
Faizan RupaniFaizan Rupani
306112
edited Nov 15 '18 at 10:47
HynekS
5121515
asked Nov 15 '18 at 10:10
Faizan RupaniFaizan Rupani
306112
edited Nov 15 '18 at 10:47
HynekS
5121515
edited Nov 15 '18 at 10:47
HynekS
5121515
edited Nov 15 '18 at 10:47
HynekS
5121515
5121515
asked Nov 15 '18 at 10:10
Faizan RupaniFaizan Rupani
306112
asked Nov 15 '18 at 10:10
Faizan RupaniFaizan Rupani
306112
asked Nov 15 '18 at 10:10
Faizan RupaniFaizan Rupani
306112
306112
indexes are hard coded ?
– Artyom Amiryan
Nov 15 '18 at 10:15
1
as your indexes are hardcoded, only option you have is to pick it from name or id attributes
– Artyom Amiryan
Nov 15 '18 at 10:22
1
create a data attribute at the same time as you are creating the id.... <input name="diameter[5][top]" type="text" data-index="5" .... then you can simply get the data attribute on the keyup
– gavgrif
Nov 15 '18 at 10:25
1
@FaizanRupani, if it would be dynamic, I would add an ` onkeyup` and will pass index to it's callback as argument
– Artyom Amiryan
Nov 15 '18 at 10:30
1
Thank you all I'm back to custom attributes.
– Faizan Rupani
Nov 15 '18 at 10:31
|
show 2 more comments
indexes are hard coded ?
– Artyom Amiryan
Nov 15 '18 at 10:15
1
as your indexes are hardcoded, only option you have is to pick it from name or id attributes
– Artyom Amiryan
Nov 15 '18 at 10:22
1
create a data attribute at the same time as you are creating the id.... <input name="diameter[5][top]" type="text" data-index="5" .... then you can simply get the data attribute on the keyup
– gavgrif
Nov 15 '18 at 10:25
1
@FaizanRupani, if it would be dynamic, I would add an ` onkeyup` and will pass index to it's callback as argument
– Artyom Amiryan
Nov 15 '18 at 10:30
1
Thank you all I'm back to custom attributes.
– Faizan Rupani
Nov 15 '18 at 10:31
indexes are hard coded ?
– Artyom Amiryan
Nov 15 '18 at 10:15
indexes are hard coded ?
– Artyom Amiryan
Nov 15 '18 at 10:15
1
1
as your indexes are hardcoded, only option you have is to pick it from name or id attributes
– Artyom Amiryan
Nov 15 '18 at 10:22
as your indexes are hardcoded, only option you have is to pick it from name or id attributes
– Artyom Amiryan
Nov 15 '18 at 10:22
1
1
create a data attribute at the same time as you are creating the id.... <input name="diameter[5][top]" type="text" data-index="5" .... then you can simply get the data attribute on the keyup
– gavgrif
Nov 15 '18 at 10:25
create a data attribute at the same time as you are creating the id.... <input name="diameter[5][top]" type="text" data-index="5" .... then you can simply get the data attribute on the keyup
– gavgrif
Nov 15 '18 at 10:25
1
1
@FaizanRupani, if it would be dynamic, I would add an ` onkeyup` and will pass index to it's callback as argument
– Artyom Amiryan
Nov 15 '18 at 10:30
@FaizanRupani, if it would be dynamic, I would add an ` onkeyup` and will pass index to it's callback as argument
– Artyom Amiryan
Nov 15 '18 at 10:30
1
1
Thank you all I'm back to custom attributes.
– Faizan Rupani
Nov 15 '18 at 10:31
Thank you all I'm back to custom attributes.
– Faizan Rupani
Nov 15 '18 at 10:31
|
show 2 more comments
1 Answer
1
active
oldest
votes
0
If you are O.K. with the 'order index' of your table data, you can do it like that (obviously, this wouldn't work if your 'numbering' won't match given order and/or amount of inputs):
const tableData = [...document.getElementById('myTable').getElementsByTagName('td')]
tableData.forEach((item, i) => item.addEventListener('keyup', () =>
console.log(i)
), false);<table id='myTable'>
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
</table>answered Nov 15 '18 at 10:25
HynekSHynekS
5121515
That's the thing I want to number my indexes. Looks like I have to go back to custom attribute
– Faizan Rupani
Nov 15 '18 at 10:30
1
Yes, you probably would. If you'd have a data attribute containing only a number, it would be easy to do.
– HynekS
Nov 15 '18 at 10:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317004%2fhow-to-get-multidimensional-input-fields-array-index-with-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
If you are O.K. with the 'order index' of your table data, you can do it like that (obviously, this wouldn't work if your 'numbering' won't match given order and/or amount of inputs):
const tableData = [...document.getElementById('myTable').getElementsByTagName('td')]
tableData.forEach((item, i) => item.addEventListener('keyup', () =>
console.log(i)
), false);<table id='myTable'>
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
</table>answered Nov 15 '18 at 10:25
HynekSHynekS
5121515
That's the thing I want to number my indexes. Looks like I have to go back to custom attribute
– Faizan Rupani
Nov 15 '18 at 10:30
1
Yes, you probably would. If you'd have a data attribute containing only a number, it would be easy to do.
– HynekS
Nov 15 '18 at 10:34
add a comment |
0
If you are O.K. with the 'order index' of your table data, you can do it like that (obviously, this wouldn't work if your 'numbering' won't match given order and/or amount of inputs):
const tableData = [...document.getElementById('myTable').getElementsByTagName('td')]
tableData.forEach((item, i) => item.addEventListener('keyup', () =>
console.log(i)
), false);<table id='myTable'>
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
</table>answered Nov 15 '18 at 10:25
HynekSHynekS
5121515
That's the thing I want to number my indexes. Looks like I have to go back to custom attribute
– Faizan Rupani
Nov 15 '18 at 10:30
1
Yes, you probably would. If you'd have a data attribute containing only a number, it would be easy to do.
– HynekS
Nov 15 '18 at 10:34
add a comment |
0
0
0
If you are O.K. with the 'order index' of your table data, you can do it like that (obviously, this wouldn't work if your 'numbering' won't match given order and/or amount of inputs):
const tableData = [...document.getElementById('myTable').getElementsByTagName('td')]
tableData.forEach((item, i) => item.addEventListener('keyup', () =>
console.log(i)
), false);<table id='myTable'>
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
</table>answered Nov 15 '18 at 10:25
HynekSHynekS
5121515
If you are O.K. with the 'order index' of your table data, you can do it like that (obviously, this wouldn't work if your 'numbering' won't match given order and/or amount of inputs):
const tableData = [...document.getElementById('myTable').getElementsByTagName('td')]
tableData.forEach((item, i) => item.addEventListener('keyup', () =>
console.log(i)
), false);<table id='myTable'>
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
</table>const tableData = [...document.getElementById('myTable').getElementsByTagName('td')]
tableData.forEach((item, i) => item.addEventListener('keyup', () =>
console.log(i)
), false);<table id='myTable'>
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
</table>const tableData = [...document.getElementById('myTable').getElementsByTagName('td')]
tableData.forEach((item, i) => item.addEventListener('keyup', () =>
console.log(i)
), false);<table id='myTable'>
<tr>
<td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td>
<td><input name="diameter[0][bottom]" type="text" id="diameter_bottom0" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[1][top]" type="text" id="diameter_top1" size="5" class="diameter" /></td>
<td><input name="diameter[1][bottom]" type="text" id="diameter_bottom1" size="5" class="diameter" /></td>
</tr>
<tr>
<td><input name="diameter[5][top]" type="text" id="diameter_top5" size="5" class="diameter" /></td>
<td><input name="diameter[5][bottom]" type="text" id="diameter_bottom5" size="5" class="diameter" /></td>
</tr>
</table>answered Nov 15 '18 at 10:25
HynekSHynekS
5121515
answered Nov 15 '18 at 10:25
HynekSHynekS
5121515
answered Nov 15 '18 at 10:25
HynekSHynekS
5121515
answered Nov 15 '18 at 10:25
HynekSHynekS
5121515
5121515
That's the thing I want to number my indexes. Looks like I have to go back to custom attribute
– Faizan Rupani
Nov 15 '18 at 10:30
1
Yes, you probably would. If you'd have a data attribute containing only a number, it would be easy to do.
– HynekS
Nov 15 '18 at 10:34
add a comment |
That's the thing I want to number my indexes. Looks like I have to go back to custom attribute
– Faizan Rupani
Nov 15 '18 at 10:30
1
Yes, you probably would. If you'd have a data attribute containing only a number, it would be easy to do.
– HynekS
Nov 15 '18 at 10:34
That's the thing I want to number my indexes. Looks like I have to go back to custom attribute
– Faizan Rupani
Nov 15 '18 at 10:30
That's the thing I want to number my indexes. Looks like I have to go back to custom attribute
– Faizan Rupani
Nov 15 '18 at 10:30
1
1
Yes, you probably would. If you'd have a data attribute containing only a number, it would be easy to do.
– HynekS
Nov 15 '18 at 10:34
Yes, you probably would. If you'd have a data attribute containing only a number, it would be easy to do.
– HynekS
Nov 15 '18 at 10:34
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317004%2fhow-to-get-multidimensional-input-fields-array-index-with-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
indexes are hard coded ?
– Artyom Amiryan
Nov 15 '18 at 10:15
1
as your indexes are hardcoded, only option you have is to pick it from name or id attributes
– Artyom Amiryan
Nov 15 '18 at 10:22
1
create a data attribute at the same time as you are creating the id.... <input name="diameter[5][top]" type="text" data-index="5" .... then you can simply get the data attribute on the keyup
– gavgrif
Nov 15 '18 at 10:25
1
@FaizanRupani, if it would be dynamic, I would add an ` onkeyup` and will pass index to it's callback as argument
– Artyom Amiryan
Nov 15 '18 at 10:30
1
Thank you all I'm back to custom attributes.
– Faizan Rupani
Nov 15 '18 at 10:31