Question

I have this star rating, I implemented from jQuery and I need to save the comments, the user id and the value of the star clicked. What I do not know is how to pass that through the ajax call and what the PHP should have at the least to process the call? Here is my code

stars code – as you can see it has a comments box , the stars with star value and the user id is stored in a variable called

$user_id

Here is the code

<tr>
         <td style="padding:10px;">
         <span style="font-size: 20px; vertical-align:top;">Comments</span>
         </td>
         <td style="padding:10px;">
         <textarea name="comments1" cols="60" rows="2"></textarea>
         </td>
         <td>
         <div>
          <input name="star1" value "1" type="radio" class="star"/>
          <input name="star1" value="2" type="radio" class="star"/>
          <input name="star1" value="3" type="radio" class="star"/>
          <input name="star1" value="4" type="radio" class="star"/>
          <input name="star1" value="5" type="radio" class="star"/> 
          </div>
         </td>
    <tr>

The ajax call – This is the attempted call to the page where I am sending the request, but how can I include the comments and user id on this call?

  $('.star').rating({
        callback: function(value, link) {
           var name = $(this).attr('name');
           $.ajax({
                url: "ajax.php",
                data: "name=" + name + "&value=" + value,
                cache: false,
                success: function(response) {
                    try {
                        console.log(response);
                    } catch (err) {
                        alert(response);
                    }
                }
            });
        }
    });

Now, ajax.php has variables $passed_user_id, $passed_comments, $passed_ratingval. How am I retrieving these values when the call is triggered in php? something like

$passed_comments = //get the value being passed from ajax call
$passed_ratingval = //get the value being passed for the rating value
$passed_user_id = //get the value being passed for the user_id`

I do have all set up, the insert query, connection everything works. I’m just not sure how to make this work with the ajax call.

Answer 1

Kinda hacky, but this will work for you. It also will allow for multiple ratings on one page (which I assume you might be doing considering the TR).

HTML:

<tr>
  <td style="padding:10px;">
    <input type="hidden" name="userID" value="<?php echo $user_id ?>">
    <span style="font-size: 20px; vertical-align:top;">Comments</span>
  </td>
  <td style="padding:10px;">
    <textarea name="comments" cols="60" rows="2"></textarea>
  </td>
  <td>
    <div>
      <input name="star1" value "1" type="radio" class="star"/>
      <input name="star1" value="2" type="radio" class="star"/>
      <input name="star1" value="3" type="radio" class="star"/>
      <input name="star1" value="4" type="radio" class="star"/>
      <input name="star1" value="5" type="radio" class="star"/> 
    </div>
  </td>
<tr>

JS:

$('.star').rating({
  callback: function(value, link) {
    var name = $(this).attr('name');
    var userID = $(this).closest('tr').find('input[name="userID"]').val();
    var comments = $(this).closest('tr').find('textarea[name="comments"]').val();
    $.ajax({
      url: "ajax.php",
      data: "name=" + name + "&value=" + value + "&userID=" + userID + "&comments=" + comments,
      cache: false,
      success: function(response) {
        try {
          console.log(response);
        } catch (err) {
          alert(response);
        }
      }
    });
  }
});

Also, if you use POST instead of GET, you can format your ajax call a bit nicer like below. Remember to use $_POST[] in your ajax.php file.

$('.star').rating({
  callback: function(value, link) {
    var name = $(this).attr('name');
    var userID = $(this).closest('tr').find('input[name="userID"]').val();
    var comments = $(this).closest('tr').find('textarea[name="comments"]').val();
    $.ajax({
      url: "ajax.php",
      type: "POST",
      data: {
        name: name,
        value: value,
        userID: userID,
        comments: comments
      },
      cache: false,
      success: function(response) {
        try {
          console.log(response);
        } catch (err) {
          alert(response);
        }
      }
    });
  }
});