Jquery Ajax Inserting data into a database

Question

I have a page with three forms, and on these forms are seperate variables. The page allows the user to enter details and they will be inserted into a MySQLdatabase for viewing. I have the script:

Edit: I also know mySql_ is deprecated but for the sake of the example it's working fine.

Edit 2: i know you can inject but that's pretty irrelevant at the moment, i think it's a problem with using a text area instead of a simple input.

Edit 3: It's just a typo.

      $("#finishButton").click(function(e) { // store final value and execute script to insert into DB. On success, switch to success page
        var commentsValid = $('#commentsDetailsForm').valid();
        if (commentsValid) {
          comments = document.getElementById('commentsInput').value;
          e.preventDefault();
          $.ajax({
            type: "POST",
            url: 'insert.php',
            data: 'forenameInput=' + forename + '&surnameInput=' + surname + '&emailInput=' + email + '&telephoneInput=' + telephone + '&genderInput=' + gender + '&dobInput=' + dob + '&commentInput=' + comments,
            success: function (data) {
              if (data == "Error") {
                $("#error").show();
                $("#processing").hide();
              } else {
                window.location.href = "success.php";
              }
            }
          });
        } else {

        }
      });

That is meant to store all the details into the database. However as things stand, it stores all the details in the database except the comments (final variable). Am i finishing the data statement wrong is there something else fundamentally wrong?

PHP Script:

<?php
// Connection Details
$servername = "localhost";
$username = "root";
$password = "user10";
$dbname = "test";

// Create connection
$conn = mysql_connect($servername, $username, $password);

// Check connection
if (!$conn) {
    die("Connection failed: " . mysql_connect_error());
}

// Select database
mysql_select_db($dbname,$conn);

// Store posted data in variables
$forename = $_POST['forenameInput'];
$surname = $_POST['surnameInput'];
$email= $_POST['emailInput'];
$telephone = $_POST['telephoneInput'];
$dob = $_POST['dobInput'];
$gender = $_POST['genderInput'];
$comments = $_POST['commentsInput'];

//Change date of birth so it's storable in mysql database
$dobAlt = date('Y-m-d',strtotime($dob));

// Insert form information into database
$sqlQuery = "INSERT INTO test (firstName, lastName, email, telephone, gender, dob, comments) VALUES ('$forename','$surname','$email','$telephone','$gender','$dobAlt', '$comments')";

// Check if query worked
if (mysql_query($sqlQuery, $conn)) {

} else {
    echo "Error: " . $sql . "<br>" . mysql_error($conn);
}

// Close db
mysql_close();

?>

html:

<form id = "commentsDetailsForm" name = "commentsDetailsForm" method = "post">
<label for "commentsInput" id = "labels"> Comments </label>
<br>                
<textarea id = "commentsInput" rows= "2" name = "commentsInput" class = "input-block-level"></textarea>
<br>
<div id = "registrationButtonWrapper">
  <button id = "finishButton" class = "insertDetailsFinal" name = "finish"> finish > </button>
</div>
</form>

You can also see it running at http://chriswaszczuk.me/jobTest/ (you'll have to fill in the form to see the database).

Answer 1

You've got a typo is all.

JS

'&commentInput=' + comments - commentInput - singular

PHP

$comments = $_POST['commentsInput']; - commentsInput - plural

Answer 2

The problem is probably that the value contains characters that are not allowed in urls.

You should make sure all your variables are properly encoded:

 '&commentInput=' + encodeURIComponent(comments)

That applies to all variables.

Apart from that you have an sql injection problem. You should switch to PDO or mysqli and use prepared statements.