getting name attribute dynamically using jquery

Question

I have a div block where I am trying to find the name of the input element which was clicked and then update the value using jQuery:

$(document).ready(function(){
  $(this).click(function(){
    console.log($(this).attr('name'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="text" name="name1" id="id1">TestData1</input>
<input type="text" name="name2" id="id2">TestData2</input>
</div>

When I try to find the input element which was clicked I get undefined.

I am assuming it may be because I am checking click event on this and then again trying to get the attr name of it, but since it can increase to at least 5 input elements and these are being fetched dynamically, I cannot bind the id/class with click event.

Just a heads up.. <input tags are self-closing.. like so <input type="text" name="name1" id="id1" /> — Grizzly
– Grizzly, Commented Feb 9, 2017 at 17:37
Use event delegation since you say you get elements dynamically.. $(document).on('click','input', function... — Rajshekar Reddy
– Rajshekar Reddy, Commented Feb 9, 2017 at 17:38
JSFiddle, then right-click and hit Inspect.. go to console.. and click in the textboxes — Grizzly
– Grizzly, Commented Feb 9, 2017 at 17:40

l.hussain · Accepted Answer · 2017-02-09 19:32:13Z

3

The this has no context inside ready function :

$(this).click(function(){
_^^^^^___________________
   console.log($(this).attr('name'));
});

You should use input :

$('input').click(function(){
   console.log($(this).attr('name'));
});

NOTE ALSO : the input tag is self closed :

<input type="text" name="name1" id="id1" value='TestData1'/>
<input type="text" name="name2" id="id2" value='TestData2'/>

I hope this will helps.

$(document).ready(function(){
  $('input').click(function(){
    console.log($(this).attr('name'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="text" name="name1" id="id1" value='TestData1'/>
<input type="text" name="name2" id="id2" value='TestData2'/>
</div>

edited Feb 9, 2017 at 19:32

answered Feb 9, 2017 at 17:38

l.hussain

4723 silver badges11 bronze badges

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

Comments

James Hunt · Accepted Answer · 2017-02-09 17:38:15Z

2

Why not bind by element instead?

$("input").click(function(){
   console.log($(this).attr('name'));
});

answered Feb 9, 2017 at 17:38

James Hunt

2,53813 silver badges24 bronze badges

Comments

Justin John · Accepted Answer · 2017-02-09 18:24:36Z

You are binding the click to document(Simply entire web page) and document doesn't have attribute called name. It will return undefined on console.

As other answers suggests, I'll also suggest binding click event to input instead of document.

If you want to bind click with document and find the target clicked element by using event which will be automatically available as an argument on click handler. Try with following snippet

$(document).ready(function(){
  $(this).click(function(event){
    console.log($(event.target).attr('name'));
  });
});

<div>
  <input type="text" name="name1" id="id1">TestData1</input>
  <input type="text" name="name2" id="id2">TestData2</input>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Here you access event target element on which you clicked and using it to get name attribute value. It returns name attribute value if your target element has name attribute else undefined will be returned.

Collectives™ on Stack Overflow

getting name attribute dynamically using jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related