Text area form field not passing value to JavaScript

Question

I have a form on my website which passes its values to some JavaScript which then passes the information to a PHP page to update the database. When the form is submitted all of the values are added to the database except the two fields which are text areas.

If I remove the JavaScript and add a simple form action to directly pass the variables to the PHP page then all of the information is added to the database including the two text area fields and so it seems the problem must be in theform and the JavaScript, otherwise the two fields wouldn't get added to the database regardless.

Below is my form and my JavaScript. ( Top keep it simple I have only included the two elements of the form which have the problems as it is a long form, if this is the wrong approach then please let me know.)

    <form action="" method="post" class="save">
        <label class="col-sm-3 control-label">Notes</label>
        <textarea name="notes" rows="10" class="form-control"></textarea>
        <input type="submit" name="submit" class="save" value="Save This Job" id="blue"/>
     </form>

And now the JavaScript

    $(document).ready(function(){
    $('form.save').submit(function () {
    var ref_number = $(this).find("[name='ref_number']").val();
    var job_title = $(this).find("[name='job_title']").val();
    var start_date = $(this).find("[name='start_date']").val();
    var closing_date = $(this).find("[name='closing_date']").val();
    var category = $(this).find("[name='category']").val();
    var location = $(this).find("[name='location']").val();
    var salary = $(this).find("[name='salary']").val();
    var client = $(this).find("[name='client']").val();
    var job_description = $(this).find("[name='job_description']").val();
    var license = $(this).find("[name='license']").val();
    var notes = $(this).find("[name='notes']").val();
         // ...
        $.ajax({
         type: "POST",
         url: "save.php",
         data: {
              ref_number : ref_number,
              job_title : job_title,
              start_date : start_date,
              closing_date : closing_date,
              category : category,
              location : location,
              salary : salary,
              client : client,
              job_description : job_description,
              license : license,
              notes : notes,

                  },
                  success: function(){
                  new PNotify({
                    title: 'Job Posted',
                    text: '
                    type: 'success',
                     shadow: true
                });


                    }
                      });
                    this.reset();
                    return false;
                      });
                  });

So here is a simplified version of the PHP which I keep changing, as I said above if I send the variables direct to the PHP page all of the information is added to the mysql database, no problems, but when using the JavaScript the job description and notes fields do not get added.

      $ref_number = $_POST['ref_number']; 
      $job_title = $_POST['job_title'];
      $start_date = $_POST['start_date']; 
      $closing_date = $_POST['closing_date'];
      $category = $_POST['category']; 
      $location = $_POST['location'];
      $salary = $_POST['salary'];
      $client = $_POST['client'];
      $job_description = $_POST['job_description'];
      $license = $_POST['license'];
      $posted_by = $_POST['posted_by'];
      $site_id = $_POST['site_id'];
      $notes = $_POST['notes'];

      mysql_query("INSERT INTO joborders 
      (ref_number, job_title, start_date, closing_date, category, location, salary, client_name, job_description, license_required, site_id, posted_by, status, notes, posted_date) VALUES('$ref_number', '$job_title', '$start_date', '$closing_date', '$category', '$location', '$salary', '$client', '$job_description', '$license', '$site_id', '$posted_by', 'open', '$notes',  NOW()) ") 
      or die(mysql_error());

So i found the problem, at the bottom of the page was this piece of code, which i hadn't noticed before even though i have looked at it a dozen times. As soon as i removed it, it worked, so now i just need to work out if i can incorporate it on to the existing code so i can still use the tnymce

    tinymce.init({
   selector: "textarea"
   });

Answer 1

OK so the problem turned out to be because there was this piece of code on the page

    tinymce.init({

selector: "textarea" });

So i changed this to reference the class of the text are in the form, like this.

 tinymce.init({
selector: "textarea.form-control",

});

And now all of the form fields post to the database.

Thanks for all your suggestions and comments, much appreciated.