使用javascript读取元素的ID

I want to use the ID of a certain element and convert it to a javascript variable to then be used in an Ajax request. Here is what outputs on to my HTML page via ajax, multiple times depending on the search.

while ( $row ) {

  echo "<div class='reviewdiv'>";
  echo "<h4>Name: " . $row[name] . "</h4>";
  echo "<h4>Type: " . $row[type] . "</h4>";
  echo "<h4>Country: " . $row[country] . "</h4>";
  echo "<h4>Region: " . $row[region] . "</h4>";
  echo "<h4>Added by: " . $row[username] . "</h4>";
  echo "<h4>Description: " . $row[description] . "</h4>";
  echo "<h4>Review This Place:</h4>";
  echo "<textarea name='review' class='userreview'></textarea>";
  echo "<input type='hidden' name='review' value='" . $row[ID] . "'>";
  echo "<input type='button' value='Submit Review' onclick='reviewajaxrequest()'>";
  echo "<h4><a href='reviewresults.php?PlaceID=" . $row[ID] . "'>View reviews</a></h4>";
  echo "<h4><a href='recommend.php?PlaceID=" . $row[ID] . "'>Recommend this place</a></h4>";
  echo "</div>";

  $row = $results->fetch();

}

What I want to do is grab $row[ID] from this and have it as a javascript variable, so it can then be passed into another script using Ajax. The function looks like this:

function reviewajaxrequest() {

  var xhr3 = new XMLHttpRequest();

      xhr3.addEventListener("load", resultsReturnedReview);
      xhr3.open("GET", "reviewadded.php?user_review=" + reviewbox + "&place_id=" + id);
      xhr3.send();

}

I want the variables "review box" and "id" to be defined if it is in the same result as the button that is clicked to trigger the function, which sends them both to another script. Any help please?

If you are using jQuery, this will work.

Change the code for the review button to this:

echo "<input type='button' value='Submit Review' data-id='".$row['ID']."' onclick='reviewajaxrequest()'>";

Then change your function to this:

function reviewajaxrequest() {
    var xhr3 = new XMLHttpRequest();
    var id = $(this).attr('data-id');
    var txtarea = $(this).parent().child('textarea[name=review]').val();
    xhr3.addEventListener("load", resultsReturnedReview);
    xhr3.open("GET", "reviewadded.php?user_review=" + reviewbox + "&place_id=" + id + "&name=" + txtarea);
    xhr3.send();
}

Also, in your other references to $row, be sure to quote the index.

Here's a generic example of use a data- attribute and plain JavaScript.

'<input id="review" type="button" data-id="' . $row[ 'ID' ] . '" value="Submit Review">';

var btns = document.querySelectorAll( '.review' );

btns.forEach( function ( btn, i, arr ) {

  btn.addEventListener( 'click', function ( e ) {
    alert( 'ID: ' + this.dataset.id );
  } );

} );

<input class="review" type="button" data-id="123" value="Submit Review">
<br>
<input class="review" type="button" data-id="456" value="Submit Review">

If dataset is not available or you want a bit more browser support you can use getAttribute():

var btn = document.querySelector( '#review' );

btn.addEventListener( 'click', function ( e ) {
  alert( 'ID: ' + btn.getAttribute( 'data-id' ) );
} );

<input id="review" type="button" data-id="123" value="Submit Review">

FWIW I wouldn't inline event handlers. It's not a proper separation of concerns. Attach the handler to the element via JS.

</div>