By B_Osipiuk


2018-10-11 14:15:12 8 Comments

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.

5 comments

@tommyO 2018-10-11 14:27:10

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-->

@Mohammad 2018-10-11 14:21:54

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 2018-10-11 14:22:01

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" />

@B_Osipiuk 2018-10-11 14:25:49

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

@Rob JS 2018-10-11 14:21:29

Try this:

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

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

@mukesh kudi 2018-10-11 14:19:45

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');

   });
 });
});

Related Questions

Sponsored Content

11 Answered Questions

[SOLVED] How can I add new array elements at the beginning of an array in Javascript?

  • 2011-11-10 00:35:22
  • Moon
  • 602196 View
  • 1232 Score
  • 11 Answer
  • Tags:   javascript arrays

16 Answered Questions

[SOLVED] Disable/enable an input with jQuery?

21 Answered Questions

33 Answered Questions

32 Answered Questions

[SOLVED] Add table row in jQuery

3 Answered Questions

[SOLVED] Get names of checkbox inside input field via JS

14 Answered Questions

[SOLVED] How can I select an element by name with jQuery?

6 Answered Questions

[SOLVED] jQuery: Get selected element tag name

18 Answered Questions

[SOLVED] Best way to remove an event handler in jQuery?

  • 2008-10-16 15:28:47
  • the0ther
  • 644975 View
  • 986 Score
  • 18 Answer
  • Tags:   jquery html-input

Sponsored Content