Add mouseenter event to all inputs with name in array using jquery

Question

I do not know how to invoke my function to all input with a name that my array contains. I have tried that:

var names = ["name1", "name2"];
$(document).ready(function(){
  $('input[name=names[0]').on("mouseenter", function() {
     $(this).attr('title', 'This is the hover-over text');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Head</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<input type="text" name="name1"> <!--This should have title-->
<input type="text" name="name2"> <!--This should have title-->
<input type="text" name="name3"> <!--This should not have title--

I tried to get the first element there, but I cannot do even that. I am very beginner in jquery (and js too), so the solution may be obvious.

Please add the relevant HTML .....

Mamun
– Mamun

2018-10-11 14:17:55 +00:00
Commented Oct 11, 2018 at 14:17 — Mamun
– Mamun, Commented Oct 11, 2018 at 14:17
Ok, I will add it now.

B_Osipiuk
– B_Osipiuk

2018-10-11 14:20:21 +00:00
Commented Oct 11, 2018 at 14:20 — B_Osipiuk
– B_Osipiuk, Commented Oct 11, 2018 at 14:20

mukesh kudi · Accepted Answer · 2018-10-11 14:19:45Z

2

You just simply run a loop over array and add eventlistner for each array element which contain inpput name.

$(document).ready(function(){
     $.each(names , function(index, item) {
       $("input[name="+ item +"]").on("mouseenter", function() {
         $(this).attr('title', 'This is the hover-over text');

   });
 });
});

answered Oct 11, 2018 at 14:19

mukesh kudi

7296 silver badges20 bronze badges

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

Comments

Mohammad · Accepted Answer · 2018-10-11 14:30:07Z

Use .filter() to filtering jquery selector and then adding event listener to them.

var names = ["name1", "name2"];
$("input").filter(function(){
  return names.indexOf($(this).attr("name")) != -1;
}).on("mouseenter", function() {
  $(this).attr('title', 'This is the hover-over text');
});

var names = ["name1", "name2"];
$("input").filter(function(){
  return names.indexOf($(this).attr("name")) != -1;
}).on("mouseenter", function() {
  $(this).attr('title', 'This is the hover-over text');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name1" value="name1">
<input type="text" name="name2" value="name2">
<input type="text" name="name3" value="name3">

Also you can add event listener to all input and in callback function check name of it.

var names = ["name1", "name2"];
$("input").on("mouseenter", function() {
  if (names.indexOf($(this).attr("name")) != -1){
    $(this).attr('title', 'This is the hover-over text');
  }
});

var names = ["name1", "name2"];
$("input").on("mouseenter", function() {
  if (names.indexOf($(this).attr("name")) != -1){
    $(this).attr('title', 'This is the hover-over text');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name1" value="name1">
<input type="text" name="name2" value="name2">
<input type="text" name="name3" value="name3">

D Lowther · Accepted Answer · 2018-10-11 14:22:01Z

1

your issue seems to be the way you are using the selector. It isn't reading that as part of an array rather as a string.

$(document).ready(function(){
    var names = ["name1", "name2"];
    
    // interpolation
    $(`input[name=${names[0]}]`).on("mouseenter", function() {
         $(this).attr('title', 'This is the hover-over text');
    });
    
    // or without interpolation
    $('input[name=' + names[1] + ']').on("mouseenter", function() {
         $(this).attr('title', 'This is different hover-over text');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name1" />
<input type="text" name="name2" />

answered Oct 11, 2018 at 14:22

D Lowther

1,6191 gold badge10 silver badges16 bronze badges

1 Comment

B_Osipiuk Over a year ago

Thanks for the answer! But it is possible to do it for all elements in the array with one loop or something like this?

SuperStar518 · Accepted Answer · 2018-10-11 14:21:29Z

0

Try this:

$("input[name^='name'").on("mouseenter", function() {
...

Ref URL: https://api.jquery.com/attribute-starts-with-selector/

answered Oct 11, 2018 at 14:21

SuperStar518

2,9252 gold badges22 silver badges37 bronze badges

Comments

Tom O. · Accepted Answer · 2018-10-11 14:33:20Z

You could do something like this:

var names = ["name1", "name2"];

//Iterate over all the text box inputs in your HTML
document.querySelectorAll('[type=text]').forEach(function(el) {
  //Check if el name attribute is in the array
  if (names.indexOf(el.name) > -1) {
    //If so, add a change event listener
    el.addEventListener('keyup', function(e) {
      //Set the title attribute to something new
      updateTitle(el, e);
    });
  }
});

function updateTitle(el, e) {
  el.title = e.target.value;
  console.log(`Updated ${el.name}: title attribute changed to ${el.title}`);
}

<h2>Head</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<input type="text" name="name1">
<!--This should have title-->
<input type="text" name="name2">
<!--This should have title-->
<input type="text" name="name3">
<!--This should not have title-->

Collectives™ on Stack Overflow

Add mouseenter event to all inputs with name in array using jquery

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related