CODEWITHSUNDEEP
phpjavascriptjquerydatabase
awejz
awejz

Reputation: 29

How can you use PHP to fetch data from a database using data already returned from the database?

My goal: Use JQuery and PHP to retrieve a list of words from a MySQL database, and then use data (i.e., the id of each word in that list) outputted from that list (in the form of buttons) to pull a second list of words from the database.

JavaScript code for retrieving first list of words from database:

$('#myButton').click(function() {
   var myData = $('#myButton').val();
   // Pass data to PHP script w/ JQuery AJAX function
   $.post("mydata.php", { buttonID: myData }, function(data) {
      $('pageSection').append(data);
   }
   $('pageSection').empty();
});

PHP code to return first list of words from database (simplified to focus on important details):

// Connect to and select database
// Execute SQL query 
// Fetch data
while($row = mysqli_fetch_assoc($result)) {
   $id = $row["id"]
   // Return output
   echo "<button class=\"entry\" value=\"$id\">" . $row["word"] . "</button>";
}

JavaScript code for using output from database to retrieve second list of words:

$('#pageSection').on('click', '.entry', function () {
   // Capture data from value property of each outputted PHP button
   var value = $('.entry').val();
   // Pass value to PHP through AJAX 
});

Problem: I expect the value for each value attribute of each button to return the corresponding id. That is, the id that corresponds to each word in the database. I don't have any problem retrieving the id. I can output it in another format, but I cannot get the right id for each value. I want to get these results:

Expected results:

<button value="id1">Word 1</button>
<button value="id2">Word 2</button>
<button value="id3">Word 3</button>

Instead I get this:

Actual results:

<button value="id1">Word 1</button>
<button value="id1">Word 2</button>
<button value="id1">Word 3</button>

Key question: Is there a way to return buttons generated in PHP so that the value attributes of each button recognize each unique value returned from the database?

Upvotes: 2

Views: 1065

Answers (2)

kaushik gandhi
kaushik gandhi

Reputation: 778

try this code 

while($row = mysqli_fetch_assoc($result)) {
   // Return output
   echo "<button class=\"entry\" value=\".$row["id"].\">" . $row["word"] . "</button>";
}

Upvotes: 1

Matt
Matt

Reputation: 75317

This is related to your jQuery, not PHP. PHP is actually outputting:

<button value="id1">Word 1</button>
<button value="id2">Word 2</button>
<button value="id3">Word 3</button>

However, inside your click handler var value = $('.entry').val(); is matching all .entry elements, and val() is returning the value of the first of those matched elements (per the docs).

Instead, use $(this) to target the element clicked.

$('#pageSection').on('click', '.entry', function () {
   // Capture data from value property of each outputted PHP button
   var value = $(this).val();
   // Pass value to PHP through AJAX 
});

Upvotes: 1

Related Questions