Why is my Ajax form not submitting correct values?

Question

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!";
}
?>

Possible duplicate of : http://stackoverflow.com/questions/986120/in-jquery-how-do-i-select-an-element-by-its-name-attribute — Hardik Solanki, Dec 24 '15 at 12:02

Nana Partykar · Answer 1 · 2015-12-24T12:06:24.773

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();

score 1 · Answer 2 · answered Dec 24 '15 at 11:59

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();

score 0 · Accepted Answer · answered Dec 24 '15 at 11:58

0

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.

answered Dec 24 '15 at 11:58

adeneo

312,895
29
395
388

Hi Mr @adeno, I've a doubt. How he is able to get value using `name` here. As, `id` is not present in `` – Nana Partykar Dec 24 '15 at 12:49
You're right, in the posted code the elements are missing the ID, but the OP also claims *`All the other variables are saved fine`* so I just assumed that was a typo. – adeneo Dec 24 '15 at 12:50
Ok Ok. *Just Asking* Cheers Man. – Nana Partykar Dec 24 '15 at 12:51
No problem, I was just answering, and I did find it strange that the OP was getting all the right variables with non-existing selectors, but that's what he said ? – adeneo Dec 24 '15 at 12:54

score 0 · Answer 4 · edited Dec 24 '15 at 14:37

0

change var star by this:

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

edited Dec 24 '15 at 14:37

Nana Partykar

10,556
10
48
77

answered Dec 24 '15 at 13:59

Vysakh

93
1
11

Why is my Ajax form not submitting correct values?

4 Answers4