How to securely POST php variables with jquery?

Question

I have a product page that I am trying to implement a rating system on.

Each product page will have the information:

productID - The ID of the product

User - The username of the user logged in

I have the following HTML for the star rating:

<fieldset id='ratingStars' class="rating">
   <input class="stars" type="radio" id="star5" name="rating" value="5" />
   <label class = "full" for="star5" title="Incredibly Powerful - 5 stars"></label>
    ...
   <input class="stars" type="radio" id="star1" name="rating" value="1" />
   <label class = "full" for="star1" title="Unusable - 1 star"></label>
 </fieldset>

I have a javascript file that is called when one of the stars is clicked, it calls a PHP file that will connect to the database and add the rating to the product:

$(document).ready(function () {
    $("#ratingStars .stars").click(function () {
        $.post('../resources/add_rating_to_product.php',{rate:$(this).val()},function(){
        });
    });
});

The PHP file just connects to the database and inserts the rating into a rating table. It expects to be POSTed the data for the username, productid, and rating.

Maybe this is a stupid question, but how do I POST that data from the javascript file? I understand how to get the rating because of the object being clicked but how do I send the other 2 if they aren't in the scope of the php file. And how do I do this securely?

It's very possible that I'm going about this all wrong so any help is appreciated!

You'd need to do it via. a post request by using AJAX or some other $http service — q.Then
– q.Then, Commented Sep 6, 2015 at 17:25
Use a hidden input in your form for the product ID. Look into submitting forms using Ajax. — rybo111
– rybo111, Commented Sep 6, 2015 at 17:28
Save them in an object -> then just send them in a JSON object. — loveNoHate
– loveNoHate, Commented Sep 6, 2015 at 17:29
Also the user ID should not be submitted in the form. It should be stored in a session variable. — rybo111
– rybo111, Commented Sep 6, 2015 at 17:30

crmepham · Accepted Answer · 2015-09-06 17:42:10Z

1

You can serialize your form and use the onSubmit event handler. Haven't tested code.

Given the following form:

<form id="ratingsForm" action="../resources/add_rating_to_product.php" method="POST">
  <input type="radio" name="rating" value="5" />
  <input type="radio" name="rating" value="1" />
  <input type="hidden" name="productId" value="<?php echo $productId; ?>" />
  <input type="submit" name="submit" value="submit" />
</form>

You can use an event handler to serialize the form data and post it using AJAX.

$(document).ready( function() {
  $("#ratingsForm").on("submit", function(){
    $.ajax( {
      type: "POST",
      url: $(this).attr( 'action' ),
      data: $(this).serialize(),
      success: function( response ) {
        console.log( response );
      }
    } );
  });
} );

edited Sep 6, 2015 at 17:42

answered Sep 6, 2015 at 17:31

crmepham

4,76019 gold badges88 silver badges163 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to securely POST php variables with jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related