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"
   });

first of all, you can use jquery serialize on submit, so you don't need to retype all the variables and data object. — Design by Adrian, Sep 06 '14 at 18:13
Have you looked at firebug/chrome tools to verify the value "notes" has been sent to the server? If it is, could you also include your relevant PHP code? — Assimilater, Sep 06 '14 at 18:16
Try `var notes = $('textarea[name=notes]').val();` instead and see if it makes a difference? — Stefan, Sep 06 '14 at 18:25
Also, as Design by Adrian pointed out, using `serialize()` http://api.jquery.com/serialize/ or `serializeArray()` http://api.jquery.com/serializearray/ could save you a lot of work. — Stefan, Sep 06 '14 at 18:39
Didn't notice you mention using a browser form-post didn't work. Still waiting to hear what you've checked with your console as I see nothing obviously wrong with your javascript. Have you tried using `console.log($(this));`, `console.log($(this).find("[name='notes']"));`, and `console.log(notes);` (or better yet put a breakpoint in your debugger and add values as needed to your watch list to figure out if there's a disconnect somewhere) — Assimilater, Sep 06 '14 at 18:45
Also [**Don't use `mysql_*` in new code**](http://stackoverflow.com/q/12859942). They are [officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). See the [red box](http://uk.php.net/manual/en/function.mysql-connect.php)? Learn about [*prepared statements*](http://en.wikipedia.org/wiki/Prepared_statement) instead, and use [PDO](http://php.net/pdo) or [MySQLi](http://php.net/mysqli) - [this article](http://php.net/manual/en/mysqlinfo.api.choosing.php) will help you decide which. If you choose PDO, [here is a good tutorial](http://wiki.hashphp.org/PDO_Tutorial_for_MySQL_Developers). — Assimilater, Sep 06 '14 at 18:51
You need to validate user inputs before entering them into your database. And please look into MySQLi or PDO as alternatives to the mysql_* functions. If you prefer procedural code, MySQLi's procedural style shouldn't be too hard to learn. — 9997, Sep 06 '14 at 19:01
hi Stefan, thanks, but that made no difference, thanks, i am going to look at debugger as i have never used it before and will update this after that — Stan Williams, Sep 06 '14 at 19:23

score 0 · Answer 1 · answered Sep 06 '14 at 21:03

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.

Text area form field not passing value to JavaScript

1 Answers1