AJAX POST Methods In HTML

Question

I am trying to update a server database using Ajax calls for a 2-dimensional array but each time I add more fields, it ignores the first fields but only updates the last field. Can anyone help please? So in this case only phonework field is being updated.

function Update_user(){
//Get the form data
//There are many ways to get this data using jQuery (you can use the class or id also)
  $.ajax({
  jsonp: 'jsoncallback',
  dataType: 'json',
  type: 'POST',
  cache:false,
  beforeSend: function() {$.mobile.loading('show')},
  complete: function() {$.mobile.loading('hide')},
  crossDomain: true,
  url: 'https://testing.vle.getsmarter.co.za/webservice/rest/server.php',
  data: {
      'wstoken': '**************',
      'moodlewsrestformat': 'json',
      'wsfunction': 'core_user_update_users',
      'users[0][id]': '2328',
      'users[0][firstname]': document.getElementById('name').value,
      'users[0][lastname]': document.getElementById('surname').value,
      'users[0][customfields][0][type]': 'stopcity',
      'users[0][customfields][0][value]':document.getElementById('city1').value,
      'users[0][customfields][0][type]': 'postalcode',
      'users[0][customfields][0][value]':document.getElementById('postc').value,
      'users[0][customfields][0][type]': 'province',
      'users[0][customfields][0][value]': document.getElementById('prov').value,
      'users[0][customfields][0][type]': 'stopcountry',
      'users[0][customfields][0][value]': document.getElementById('country2').value,
      'users[0][customfields][0][type]': 'addressline1',
      'users[0][customfields][0][value]': document.getElementById('1').value,
      'users[0][customfields][0][type]': 'addressline2',
      'users[0][customfields][0][value]': document.getElementById('2').value,
      'users[0][customfields][0][type]': 'phonemobile',
      'users[0][customfields][0][value]': $("#mobile").attr('value'),
      'users[0][customfields][0][type]': 'phonework',
      'users[0][customfields][0][value]': $("#work").attr('value'),    
    },
    success: function(data) {
      // enable previous buttons
    $('#enable').css('visibility', 'visible');
    $('#back1').css('visibility', 'visible');
      // disable previous buttons
    $('#save').css('visibility', 'hidden');
    $('#cancel').css('visibility', 'hidden');
  // diable fields
    window.location.reload();
    alert("Profile updated." );
    },
    error: function() {

      alert('Update has failed!');
    }
  });
}

Answer 1

You code is not updating first field bug updating last field, because you are using same name for all fields users[0][customfields][0][value]

  'users[0][customfields][0][type]': 'stopcity',
  'users[0][customfields][0][value]':document.getElementById('city1').value,
  'users[0][customfields][0][type]': 'postalcode',
  'users[0][customfields][0][value]':document.getElementById('postc').value,
  'users[0][customfields][0][type]': 'province',
  'users[0][customfields][0][value]': document.getElementById('prov').value,
  'users[0][customfields][0][type]': 'stopcountry',
  'users[0][customfields][0][value]': document.getElementById('country2').value,
  'users[0][customfields][0][type]': 'addressline1',
  'users[0][customfields][0][value]': document.getElementById('1').value,
  'users[0][customfields][0][type]': 'addressline2',
  'users[0][customfields][0][value]': document.getElementById('2').value,
  'users[0][customfields][0][type]': 'phonemobile',
  'users[0][customfields][0][value]': $("#mobile").attr('value'),
  'users[0][customfields][0][type]': 'phonework',
  'users[0][customfields][0][value]': $("#work").attr('value'),   

Try using some other name for your fields like

  'users[0][customfields][0][type]': 'stopcity',
  'users[0][customfields][0][value]':document.getElementById('city1').value,
  'users[0][customfields][1][type]': 'postalcode',
  'users[0][customfields][1][value]':document.getElementById('postc').value,
  'users[0][customfields][2][type]': 'province',
  'users[0][customfields][2][value]': document.getElementById('prov').value,
  'users[0][customfields][3][type]': 'stopcountry',
  'users[0][customfields][3][value]': document.getElementById('country2').value,
  'users[0][customfields][4][type]': 'addressline1',
  'users[0][customfields][4][value]': document.getElementById('1').value,
  'users[0][customfields][5][type]': 'addressline2',
  'users[0][customfields][5][value]': document.getElementById('2').value,
  'users[0][customfields][6][type]': 'phonemobile',
  'users[0][customfields][6][value]': $("#mobile").attr('value'),
  'users[0][customfields][7][type]': 'phonework',
  'users[0][customfields][7][value]': $("#work").attr('value'),