当存在多个相等的CSS类时，使用jQuery val（）获得正确的值

Question

I have a code as follows.

I need to get the name of the user whos button has been clicked. This example has to be fixed because there are several "user_name" classes and I think jQuery doesn't know what value to grab with val().

How can I fix this?

 $(document).ready(function(){ $(document).on("click", ".btn" , function() { var myuser = $('user_name').val(); }); }); 

 <div id="message_box"> <div> <span class="user_name"> <button class="btn">Click</button> John </span>: <span class="user_message">Hello!</span> </div> <div> <span class="user_name"> <button class="btn">Click</button> Jeff </span>: <span class="user_message">Hi!</span> </div> <div> <span class="user_name"> <button class="btn">Click</button> Jane </span>: <span class="user_message">Whats up?!</span> </div> </div> 

Answer 1

You need to use traversal methods:

 $(document).ready(function(){ $(document).on("click", ".btn" , function(e) { e.preventDefault(); var myuser = $(this).closest('div').find('.user_name').text(); console.log(myuser); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="message_box"> <div> <button class="btn">Click</button> <span class="user_name">John</span>: <span class="user_message">Hello!</span> </div> <div> <button class="btn">Click</button> <span class="user_name">Jeff</span>: <span class="user_message">Hi!</span> </div> <div> <button class="btn">Click</button> <span class="user_name">Jane</span>: <span class="user_message">Whats up?!</span> </div> </div> 

Note how I've moved the button out of the span so that its text is not included in the result. Alternatively, you could use an input:

<input class="btn" type="button" value="Click" />

Answer 2

Just modify the HTML as below since it would be feasible for us to traverse to the relevant element and try to use the this context to retrieve the value relative to the clicked button,

HTML:

<div id="message_box">
    <div>
        <button class="btn">Click</button><span class="user_name"> John</span>: <span class="user_message">Hello!</span>
    </div>
    <div>
        <button class="btn">Click</button><span class="user_name"> Jeff</span>: <span class="user_message">Hi!</span>
    </div>
    <div>
        <button class="btn">Click</button> <span class="user_name">Jane</span>: <span class="user_message">Whats up?!</span>
    </div>
</div>

JS:

$(document).ready(function(){
  $(document).on("click", ".btn" , function() {
    var myuser = $(this).next('.user_name').val();
  });
});

DEMO

Answer 3

You need to add type="button" to the button to prevent default action of submitting, because buttons with no specified type attribute have type equal to submit . The val() method is not applicable to non-form elements, such as spans.

Answer 4

You jQuery selector is invalid. Use $('.user_name') (it's takes all elements with class 'user_name') instead of $('user_name') .

PS: Better give some distinct names or id attributes to those inputs and use corresponding jQuery selector ('#myId' for input with id="myId" or '[name="name1"]' for input with name="name1")

Answer 5

Here is an example of what you're trying to accomplish.

First, I cleaned up your click function a little bit. I always try to use the shortest method possible to achieve the desired results.

Second, you need to us the this keyword inside of the function. This gives you access to the button that was actually clicked. From there, you can find the text that you need by traversing up the DOM 1 level ( .parent() ), then find the .text() instead of the val() .

As a side note, you shouldn't have a <button> element inside of a <span> element.

In this example, I'm appending the name to the div just to show that it's working.

 $(document).ready(function(){ $(".btn").click(function() { var myuser = $(this).parent().text().replace("Click ", ""); $("#message_box").append(myuser); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="message_box"> <div> <span class="user_name"><button class="btn">Click</button> John</span>: <span class="user_message">Hello!</span> </div> <div> <span class="user_name"><button class="btn">Click</button> Jeff</span>: <span class="user_message">Hi!</span> </div> <div> <span class="user_name"><button class="btn">Click</button> Jane</span>: <span class="user_message">Whats up?!</span> </div> </div> 

Answer 6

val() is used elements in which we take user Inputs. What you are looking for is text();

$(document).ready(function(){ $(document).on("click", ".btn" , function() { //if you want to access the attributes of the parent span of button which is clicked, use following code $(this).closest('span').text(); //if yoU want to access the attributes of next span with class user_message, use following code $(this).closest('span').next().text(); }); });

Answer 7

Your span is encapsulating the button which is invalid. I have used data attributes of HTML-5 for the same.You can use any of solution which are answered above or go with the data-attributes.

<div id="message_box">
    <div>
        <button class="btn" data-user-name="John">Click</button><span class="user_name"> John</span>: <span class="user_message">Hello!</span>

    </div>
    <div>
        <button class="btn" data-user-name="Jeff">Click</button><span class="user_name"> Jeff</span>: <span class="user_message">Hi!</span>

    </div>
    <div>
        <button class="btn" data-user-name="Jane">Click</button> <span class="user_name">Jane</span>: <span class="user_message">Whats up?!</span>

    </div>
</div>

JavaScript

$(document).ready(function () {
     $(document).on("click", ".btn", function () {
         var myuser = $(this).data("user-name");
         alert(myuser)
     });
 });

Demo

Answer 8

<div id="message_box">
  <div>
    <button class="btn">Click</button>
    <span class="user_name"> John</span>:
    <span class="user_message">Hello!</span>
  </div>
  <div>
    <button class="btn">Click</button>
    <span class="user_name">Jeff</span>:
    <span class="user_message">Hi!</span>
  </div>
  <div>
    <button class="btn">Click</button>
    <span class="user_name"> Jane</span>:
    <span class="user_message">Whats up?!</span>
  </div>
</div>


$(document).on("click", ".btn" , function() {
    //var myuser = $('user_name').val();
    var myuser = $(this).parent().find('.user_name').text();
    alert(myuser);
  });

Working example here
Fiddle