Ajax with submit form and php

Question

I am not sure what I am doing wrong. I have searched over multiple forums but did not get a solution. I have the following ajax defined for submitting values from a form. I have the alert function to make sure that this code is being called (which it is), but process.php is not being executed. Any ideas why? Here is the ajax code (my dataString contains the value for all variables and there seems to be no problem with the $_POST variables.

    // JavaScript Document
$(document).ready(function(){
$(".button").click(function() {
  // validate and process form here
  //alert("yayyy");

   var company = $("input#company").val();
   var jobfunc = $("input#jobfunc").val();
   var location = $("input#location").val();
   var overall = $("input#overall").val();
   var detail = $("textarea#detail").val();
   var pros = $("textarea#pros").val();
   var cons = $("textarea#cons").val();
   var sr_mgmt = $("textarea#sr_mgmt").val();
   var submitted_by = $("input#submitted_by").val();
   var classof = $("input#classof").val();
   var school = $("input#school").val();
   var anonymous = $("input#anonymous").val();
   if (anonymous == 'on')
   {
       var anonymous_tmp = 'Y';
   }
   else
   {
       var anonymous_tmp = 'N';
   }

    var dataString = 
    'company=' + company +
    '&jobfunc=' + jobfunc +
    '&location=' + location +
    '&overall=' + overall +
    '&detail=' + detail +
    '&pros=' + pros +
    '&cons=' + cons +
    '&sr_mgmt=' + sr_mgmt +
    '&submitted_by=' + submitted_by +
    '&classof=' + classof + 
    '&school=' + school +
    '&anonymous=' + anonymous_tmp;

  alert (dataString);
  $.ajax(
  {
    type:"POST",
    url:"process.php",
    data:dataString,
    success:function() 
    {
      $('#testimonials').html("<div id='message'></div>");
      $('#message').html("<h2>Your information has been submitted!</h2>")
      .append("<p>Thank you for your help and support.</p>")
      .hide()
      .fadeIn(1500, function() 
      {
        $('#message').append("<img id='checkmark' src='images/check.png'/>");
      });
    }
  });
  return false;
});
});

Answer 1

Is process.php returning a 500 error and is it sitting in the root of your web app? You can find out by inspecting the developer console log in your browser, or change the function

success:function() 

to

success:function(res, textStatus, jqXHR) {
console.log(res);
console.log(textStatus);
console.log(jqXHR);
}

and examine what's being returned.

Also, instead of manual constructing the form values, why don't you just use

$('id_of_form').serialize();

and just pass it to $.post?

Hope that helps.