shahid khan shahid khan - 2 months ago 9
Ajax Question

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

Answer
$(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