Jquery's ajax function not being called

Jquery's ajax function not being called

I have a web page which fill's form data based on some json data sent from a web service. Once the form is ready to be submitted a function is called which takes all the form data turns it into a xml-formatted string then parses the xml so it becomes a valid xml object. This is where the problem happens, once this data is turned into an xml I would like to post this data back to the web service so the database can be updated. However using the $.ajax() function to post this data, neither the success nor error function within are ever called. This lead's me to believe the ajax function is never being called or run. Below are the code snippets:

submit button for form:

  1.     <input type="submit" name="submitbutton" id="submitbutton" value="Submit" onclick="postData()"/>


postData function:

  1.     function postData()
  2.      {
  3.                 //gathering all inputs
  4.      var cb = document.getElementById('paymentList');
  5.      var selected_cb = cb.options[cb.selectedIndex].text;
  6.      var pguid = getParameterByName('guid');
  7.      var xmlString = '<string>' +
  8.      addField('approver', $('#approver').val()) +
  9.      addField('companyName', $('#companyName').val()) +
  10.      addField('emailAddress', $('#emailaddress').val()) +
  11.      addField('address1', $('#address1').val()) +
  12.      addField('address2', $('#address2').val()) +
  13.      addField('city', $('#city').val()) +
  14.      addField('province', $('#province').val()) +
  15.      addField('country', $('#country').val()) +
  16.      addField('postalCode', $('#postalcode').val()) +
  17.      addField('phoneNumber', $('#phone').val()) +
  18.      addField('paymentMethod', selected_cb);
  19.     
  20.                 //gathering all table data now
  21.      xmlString+='<contractData>';
  22.      $('#table tbody tr:has(img[src="images/checkmark.png"])').each(function() {
  23.       xmlString += '<contract>' + addField('vendorPart', $('td:eq(1)', this).text()) +
  24.      addField('description', $('td:eq(2)', this).text()) +
  25.      addField('price', $('td:eq(3)', this).text()) +
  26.      addField('quantity', $('td:eq(4) input', this).val()) + '</contract>';
  27.      });
  28.     
  29.     
  30.      xmlString += '</contractData></string>';
  31.       
  32.      //hard coded var for purpose of this example, as web service name will be 
  33.      var properid = 'somedata';
  34.     
  35.      xmlDoc = $.parseXML( xmlString );
  36.      $xml = $( xmlDoc );

  37.                 //this function I believe is never run as neither alerts below are posted
  38.      $.ajax({
  39.                      type: "POST",
  40.                      url: "http://www.webservice.com/service.asmx/sendMeMyData",
  41.                      data: {properdata:properid, xml: $xml},
  42.                      dataType: "text",
  43.                      success: function() {
  44.     
  45.      alert("posted");
  46.      },
  47.      error: function ()
  48.      {
  49.      alert("error");
  50.      }
  51.      });
  52.     
  53.      }


addField function (just so you know what it does when it's called in postData()):

  1.     function addField(name, value) { // Add a single element and value
  2.       value = value.replace(/&/g, '&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  3.       return '<' + name + '>' + value + '</' + name + '>';
  4.      }