How to get index of input in javascript - can use jQuery

Question

I have an array of inputs generated from js code. I have set the name of the inputs like this: name="myTextInput[]"

How can I get the index of the selected input?

I tried something like:

 onClick="oc(this);"

where:

function oc(inp)
{
    return(inp.index);
}

but is not working.

I can use jQuery as well

You're not using jQuery in your sample code. Do you want to? — Blazemonger
– Blazemonger, Commented Mar 2, 2012 at 13:32
In the future, please try to provide a complete code sample so that we understand exactly what you're working on and what you're trying to solve. — Blazemonger
– Blazemonger, Commented Mar 2, 2012 at 13:55

jeffery_the_wind · Accepted Answer · 2012-03-02 13:41:48Z

3

You can use the EACH function in jquery. This will parse through the set of matched elements. You can put a custom function inside that will use the index of each element, as you parse through, as an argument.

$('input').each(function(index){
    alert(index);
});

You can also get the value of each input like this:

$('input').each(function(index, val){
    alert(index + ' has value: ' + val);
});

see details here: http://api.jquery.com/jQuery.each/

** EDIT **

If you want the value shown in an alert box on click, use the each function and the click function together. Remember to get the real-time value of the input, use $(this).val(). Return index and value data on click:

$('input').each(function(index, val){
    $(this).click(function(){
        alert(index + ' has value: ' + $(this).val());
    });
});

edited Mar 2, 2012 at 13:41

answered Mar 2, 2012 at 13:34

jeffery_the_wind

18.3k35 gold badges109 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shanabus Over a year ago

I thought the OP was looking to do this onclick, not as part of an each() function. If you're going to loop, you might consider a simple for(...) structure.

score 1 · Accepted Answer · 2012-03-02 13:46:33Z

1

You could get the input like this (not sure if you actually wanted the click event though)...

var inputs = $('input[name="myTextInput[]"]');

inputs.click(function() {
    alert(inputs.index(this));
});

edited Mar 2, 2012 at 13:46

answered Mar 2, 2012 at 13:37

user1106925

Comments

shanabus · Accepted Answer · 2012-03-02 13:37:00Z

0

Please use the index() method to find the position of an element.

Check out this example: http://jsbin.com/uyucuv/edit#javascript,html

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>


$(function() {
  $("li").on("click", function() {
    alert($(this).index());
  });
});

Check the index() documentation here: http://api.jquery.com/index/

Hope this helps!

answered Mar 2, 2012 at 13:37

shanabus

13.1k6 gold badges55 silver badges78 bronze badges

Comments

Blazemonger · Accepted Answer · 2012-03-02 13:51:54Z

0

The "jQuery way" is to avoid onClick="whatever()" and use pure JavaScript separate from the HTML tags. Try this between a pair of <script> tags (note: requires jQuery 1.7 or higher):

$('input').on('click', function() {
    var varname = $(this).attr('name'),
        $arr = $('input[name="'+varname+'"]'),
        idx = $arr.index(this);

    alert(idx);
});

http://jsfiddle.net/mblase75/EK4xC/

answered Mar 2, 2012 at 13:51

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Collectives™ on Stack Overflow

How to get index of input in javascript - can use jQuery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related