CODEWITHSUNDEEP
javascriptjqueryhtmlajax
shahid khan
shahid khan

Reputation: 439

getting value from nearest of clicked button

i am trying to do a profile management function in that i want to add type of users that is students to other type of user's is teacher's database for that i am using i using jquery and ajax but i am facing a problem to accomplish that which is each student have a add button who are listed in in html page (this is listing done using php for selecting from data base) when i press add button of each student i get undefined in alert box

part of html is 

  <li class="studdet">
   <div class="row">
      <div class="col-md-6" id="studname">
         <div class="col-md-3" id ="all">
            <label>Name Of Student:</label>
            <p id="nameOfStud" >name of student fetched from database</p>
         </div>
         <div class ="col-md-3">
            <label></label>
            </br></br>
            <button class="btn-u" id="addStudents">Add</button>
         </div>
      </div>
   </div>
</li>
<li class="studdet">
   <div class="row">
      <div class="col-md-6" id="studname">
         <div class="col-md-3">
            <label>Name Of Student:</label>
            <p id="nameOfStud" >Name of student fetched from data base</p>
         </div>
         <div class ="col-md-3">
            <label></label>
            </br></br>
            <button class="btn-u" id="addStudents">Add</button>
         </div>
      </div>
   </div>
</li>

jquery for gettting value of student name is

$(document).on('click', '#all #addStudents', function() {
        var option = $(this).closest("id","nameOfStud").html();
        alert(option);
        // $.ajax({url: "http://localhost/ededge/Add_students/add_to_group",data: {studentname : option},type:"POST", success: function(result){
        //  $('#studdet').attr('class','label label-light');
        //  alert(result);
        // }});
    });

but what i am getting is undefined in alert box

help me to find my error like before

Upvotes: 1

Views: 1761

Answers (2)

Mudassir Hasan
Mudassir Hasan

Reputation: 28761

$(document).on('click', '#addStudents', function() {
    var option = $(this).closest('div#studname').find('p#nameOfStud').text();
    alert(option);

});

closest('div#studname') searches for parent div in DOM heirachy with id studname

find('p#nameOfStud') searches for p tag descendants in DOM tree of earlier searched div.

.text() fetches text inside paragraph tag

Upvotes: 2

progrAmmar
progrAmmar

Reputation: 2670

You cannot have multiple ids in jQuery. ID is unique. Try the following:

Change your <p> element as follows:

<p class="nameOfStud" >Name of student fetched from data base</p>

Change your 'button' as follows:

<button class="btn-u addStudents">Add</button>

Then try the following code:

$(function(){
    $('.addStudents').click(function(){
        var option = $(this).closest('.nameOfStud').html();
        alert(option);
    });
});

Upvotes: 0

Related Questions