I have a small search engine querying the database for a list of names. The engine returns a maximum of 5 names. There is a button next to each each person's name. When the button is clicked, my jQuery code is supposed to add only that person's name to a comma separated list. Currently, it is adding every name that the engine pulls up. Im assuming I need to utilize the this
command somehow. I feels as if my div isn't properly being selected.
The Question: how do you access the text of a paragraph that exists in the same class as the button?
The paragraph and button are enclosed by a class. The paragraph has a class. The button has a class.
//jQuery function to add the name to my list of names
$(document).ready(function(){
var addList = $('.addList');
$(".addCustomer").on( "click", function() {
customerToAdd = $('.addIndividual > .searched_name').text(); //here is where the problem lies. it comma separates every name
addList.val($('.addList').val() + customerToAdd + ', ');
search.val('');
});
});
And here is my html enclosed in php. This holds the fields that are used by the jQuery above.
while($state = mysqli_fetch_assoc($states)) {
$customerid = $state['id'];
$customername = $state['name'];
echo "
<div class='addIndividual' >
<p style='float:left;' class='searched_name'>".$customername."
</p>
<button type='button' value=".$customername." class='btn btn-default addCustomer'>Assign List to a Class</button>
</div>
<hr>";
}
You need to change
$('.addIndividual > .searched_name').text();
to
$(this).val();
OR if not the same as in the customer paragraph (it does seem that it is now):
$(this).closest(".addIndividual").find('.searched_name').text();
or if the paragraph stays next to the button for sure:
$(this).prev().text();
Instead of $(".addCustomer").on( ...
create a function like this:
function addCustomer(index){
$('.addIndividual .searched_name_'+index).text();
// continue the script ...
}
Your while loop will now look like this:
<p style='float:left;'class='searched_name_".$customerid."'>".$customername."</p>
It looks like you already have the customer's name in the value
attribute of the button. You can just grab it with: $(this).val()
.
You should also change your button to use class="addCustomer"
instead of id="addCustomer"
. ID's are for unique elements, while a class is for multiple elements. In your case, you have a button for each customer.