How to get key (index) value of a textbox in array textboxes

Question

I want a jQuery function or javascript that alert the index and the value of array textboxes : e.g.

<input type="text" name="textbox[]" value="1" onblur="javascriptfunction(this.value,this.index)" />
<input type="text" name="textbox[]" value="foo" onblur="javascriptfunction(this.value,this.index)" />

<input type="text" name="textbox[]" value="banana" onblur="javascriptfunction(this.value,this.index)" />

Whenever mouse moves for example from the first input I have this alerted (1,0) and second is (foo,1) and so on. I couldn't find the function that does that. Please help.

im just giving an example of what i want to do ! how to get the index or the key of that selected textbox — kallo kallo
– kallo kallo, Commented May 27, 2015 at 16:04

AmmarCSE · Accepted Answer · 2015-05-27 16:23:45Z

1

You can use jQuery index() and val() like

$('input').blur(function(){
  alert($(this).val() + ',' + ($(this).index()-1));
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input type="text" name="textbox[]" value="1" />
<input type="text" name="textbox[]" value="foo" />

<input type="text" name="textbox[]" value="banana" />

Update

To target certain elements or have this in a named function, first, put identifiers on your elements such as a class my-class. Then, make a named function and pass it to the jQuery blur function

$('.my-class').blur( alertIndexAndVal );

function alertIndexAndVal(){
  alert($(this).val() + ',' + ($(this).index()-1));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input class="my-class" type="text" name="textbox[]" value="1" />
<input class="my-class" type="text" name="textbox[]" value="foo" />

<input class="my-class" type="text" name="textbox[]" value="banana" />

edited May 27, 2015 at 16:23

answered May 27, 2015 at 16:03

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

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

8 Comments

kallo kallo Over a year ago

How to make a function for that ? its not necessary that all textboxes send values and indexes ! thank you for your great contribution

AmmarCSE Over a year ago

@kallokallo, do you mean you want to have only certain inputs do this? Or do you just want to use a named function like function getValAndIndex(){...}?

kallo kallo Over a year ago

Thank you Ammar ! the problem is im using jquery clone to duplicate rows that have array input fields ! your code only works on the first input and doesnt work on the rest of the input text fields that have the same name ! so i decided to try to broadcast the index for each element (textbox) using a function that i should call every time i generate a new input text field .. like this <input type="text" name="textbox[]" value="foo" onblur="javascriptfunction(this.value,this.index)" /> is that possible ?

AmmarCSE Over a year ago

@kallokallo, can you create a fiddle?

AmmarCSE Over a year ago

@kallokallo, but note the fiddle above uses a newer version of jquery. Let me know if you cannot use a newer version

|

PeterKA · Accepted Answer · 2015-05-27 16:17:33Z

0

var textboxes = $('input[name="textbox[]"]');

textboxes.on('blur', function() {
    var index = textboxes.index( this );
    alert( this.value + ', ' + index );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="textbox[]" value="1"  />
<input type="text" name="textbox[]" value="foo"  />
<input type="text" name="textbox[]" value="banana"  />

edited May 27, 2015 at 16:17

answered May 27, 2015 at 16:06

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

7 Comments

kallo kallo Over a year ago

Thank you Peter, but still the code works for only first text box but not the rest ! im using this code to clone the table tr :

kallo kallo Over a year ago

kallo kallo Over a year ago

maybe that what caused the problem ?

PeterKA Over a year ago

It might be helpful if you created a jsfiddle ..... which would be much easier to troubleshoot. What do you think?

kallo kallo Over a year ago

You are genius Man !! thank you from the bottom of my heart !!

|

MinusFour · Accepted Answer · 2015-05-27 16:57:30Z

0

I figured I'd post a javascript solution which to be honest attempts to do something like the index function of jquery although i think jquery function might be better.

var getIndexValue = function (e) {
    var children = e.parentElement.children;
    for (var i = 0; i < children.length; i++) {
        if (children[i] == e) {
            alert("Index: " + (i+1) + ", Value: " + e.value);
        }
    }
}

<div>
    <input type="text" name="textbox[]" value="one" onblur="getIndexValue(this)">
    <input type="text" name="textbox[]" value="two" onblur="getIndexValue(this)">
    <input type="text" name="textbox[]" value="three" onblur="getIndexValue(this)">
</div>

Index: (i+1)

Value: (e.value);

answered May 27, 2015 at 16:57

MinusFour

14.5k4 gold badges32 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to get key (index) value of a textbox in array textboxes

3 Answers 3

8 Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related