CODEWITHSUNDEEP
phpjqueryajaxforms
JulianJ
JulianJ

Reputation: 1317

Why is my Ajax form not submitting correct values?

I have a working form that saves a star rating (1 to 5) to a mysql database. I am now trying to make this form submit with ajax but I only ever get the value "5" saving to my database (All the other variables are saved fine). Can anyone tell me what's wrong? Many thanks.

The Form

<form>
<input class="star star-5" id="star-5" type="radio" name="star" value="5"/>
<label class="star star-5" for="star-5"></label>
<input class="star star-4" id="star-4" type="radio" name="star" value="4"/>
<label class="star star-4" for="star-4"></label>
<input class="star star-3" id="star-3" type="radio" name="star" value="3"/>
<label class="star star-3" for="star-3"></label>
<input class="star star-2" id="star-2" type="radio" name="star" value="2"/>
<label class="star star-2" for="star-2"></label>
<input class="star star-1" id="star-1" type="radio" name="star" value="1"/>
<label class="star star-1" for="star-1"></label>
<input type="hidden" name="username" value="<?php echo $username;?>">
<input type="hidden" name="film_id" value="<?php echo $film_id;?>">

<button type="submit"  id="FormSubmitRate"  class="btn btn-primary btn-xs  pull-right">Rate!</button>

</form>

The Jquery

  //Add Rating
  $(document).ready(function(){
  $("#FormSubmitRate").click(function (e) {
  e.preventDefault();

 var username=$("#username").val();
 var film_id=$("#film_id").val();
 var star=$("[name=star]").val();

$.post('ajax_addrating.php', {username: username, film_id: film_id, star:   star},
function(data){
$("#message").html(data);
$("#message").hide();
$("div.success").fadeIn(500); //Fade in the data given by the insert.php file
 $("div.success").fadeOut(2500); //Fade in the data given by the insert.php file
 $( "div.success" ).html();
 });
return false;
 });
  });
  </script>

ajax_addrating.php

<?php
//include db configuration file
include_once("config.php");
 //Configure and Connect to the Database
 if (!$mysqli) {
 die('Could not connect: ' . mysqli_error());
 }


 $username=$_POST['username'];
 $film_id=$_POST['film_id'];
 $rating=$_POST['star'];
 //Insert Data into mysql

$stmt = $mysqli->prepare('INSERT user_reviews SET rating = ?, film_id=?,   username=?');
$stmt->bind_param('sss', $rating, $film_id, $username);
$stmt->execute();
if ($stmt->errno) {
echo "There was an error " . $stmt->error;
} else{
echo " Success!";
}
?>

Upvotes: 0

Views: 88

Answers (4)

Vysakh
Vysakh

Reputation: 93

change var star by this:

var star=$("[name=star]:checked").val();

Upvotes: 0

Nana Partykar
Nana Partykar

Reputation: 10548

You missed id in <input type='hidden' ...>

And, make changes here to as var star=$("[name=star]:checked").val();

Change

<input type="hidden" name="username" value="<?php echo $username;?>">
<input type="hidden" name="film_id" value="<?php echo $film_id;?>">

To

<input type="hidden" id='username' name="username" value="<?php echo $username;?>">
<input type="hidden" id='film_id' name="film_id" value="<?php echo $film_id;?>">

And,

Change 

var star=$("[name=star]").val();

To

 var star=$("[name=star]:checked").val();

Edited Code

<input type="hidden" id='username' name="username" value="<?php echo $username;?>">
<input type="hidden" id='film_id' name="film_id" value="<?php echo $film_id;?>">

var username=$("#username").val();
var film_id=$("#film_id").val();
var star=$("[name=star]:checked").val();

Upvotes: 1

JustAnotherCoder
JustAnotherCoder

Reputation: 393

Your problem is this line:

var star=$("[name=star]").val();

which will select ALL of the buttons with the name "star" and give you the value of one of them (presumably the first as you're always getting 5).

Try this instead to only get the selected one:

var star=$("[name=star]:checked").val();

Upvotes: 1

adeneo
adeneo

Reputation: 318182

Change it to

var star = $("[name=star]:checked").val();

Right now you're selecting all the radio buttons, not just the checked one, and val() return the value from the first element in the collection, i.e. 5 every time.
You have to select only the checked radio button, and get it's value.

Upvotes: 0

Related Questions