jQuery TypeError: 'msgs' is null help needed

Question

I am hitting my head against a wall, trying figure out why I keep getting a 'TypeError: 'msgs' is null error'. I have checked my jQuery and php code over and over again and even tried console.log(msgs), but nothing shows in the console. Can someone please help me to see where I have slipped up. Many thanks

// Function to enter intake user area

$(function ()
  {

      $.validator.setDefaults(
          {
              errorClass: 'form_error',
              errorElement: 'span'
          });

      $("#USRboxint").validate(
          {
              rules:
              {
                  requested:
                  {
                      required: true
                  },
                  service:
                  {
                      required: true
                  },
                  dept:
                  {
                      required: true
                  },
                  address1:
                  {
                      required: true
                  },
                  datepicker:
                  {
                      required: true
                  },
                  box_add:
                  {
                      required: true
                  }
              },
              messages:
              {
                  requested:
                  {
                      required: '* required: You must enter your name'
                  },
                  dept:
                  {
                      required: "* required: You must select a department"
                  },
                  address1:
                  {
                      required: "* required: You must select a customer address"
                  },
                  service:
                  {
                      required: "* required: You must select a tier level"
                  },
                  box_add:
                  {
                      required: "* required: You must enter a number"
                  },
                  datepicker:
                  {
                      required: "* required: You must enter a date"
                  }
              },

              submitHandler: function()   {
                  if ($("#USRboxint").valid() === true)  { 
                      var data = $("#USRboxint").serialize();
                      $.post('/domain/users/boxesadd.php', data, function(msgs) {

                          var messageOutputs = '';
                          for (var i = 0; i<msgs.length; i++){ <--- **ERROR IS HERE**

                                                               messageOutputs += msgs[i].box+'  '; 
                                                               console.log(messageOutputs);    
                                                             }
                          $("#USRaddbox").html("You have entered box: " + "<b>" + messageOutputs + "</b><br /> You may now close this window.");
                          $("#USRboxint").get(0).reset();
                      }, 'json');

                  } else

                  { 
                      return; 
                  }
              },
              success:    function(msg)   {
                  //$("#BA_addbox").html("You have entered a new entry");
                  //$("#BA_boxform").get(0).reset();
              }   

          });
  });

PHP Backend

<?php

$requested = mysql_real_escape_string($_POST['requested']);
$activity = mysql_real_escape_string($_POST['activity']);
$address = mysql_real_escape_string($_POST['address1']);
$service = mysql_real_escape_string($_POST['service']);
$box = mysql_real_escape_string($_POST['box_add']);
//$destroydate = mysql_real_escape_string($_POST['BA_destdate']);
$date = DateTime::createFromFormat('d/m/Y', $_POST['datepicker']);
$destdate = $date->format('Y-m-d');
$authorised = mysql_real_escape_string($_SESSION['kt_name_usr']);
$submit = mysql_real_escape_string($_POST['submit']);
$dept = mysql_real_escape_string($_POST['dept']);
$array = split('[,]', $_POST['box_add']);

if (isset($_POST['submit']))    {
    $form = array();
    foreach ($array as $box) {
        $form[] = array('dept'=>$dept,
                        'company'=>$company,
                        'address'=>$address,
                        'service'=>$service,
                        'box'=>$box,
                        'destroydate'=>$destroydate,
                        'authorised'=>$authorised,
                        'submit'=>$submit);
    }
}
$result=json_encode($form);

echo $result;

?>

Answer 1

.serialize() won't include the submit button in the data that's sent to the server. It's only sent automatically when the form is submitted normally.

Try:

var data = $("#USRboxint").serialize() + '&submit=true';