AJAX Submit the My Account Page

Posted by nicholas.alipaz on March 28, 2009 at 5:21am

I am trying to submit this page via an ajax submit, but it never seems to post the values. I have attempted the following code which seems to operate correctly, however my account never changes. Any assistance would be great!

// initialize vars
var form_url = "http://mysite.com/user/me/edit";
var poststr="";
var http_request=false
var self=this;

// AJAX posting function
function makePOSTRequest(url, parameters, mode) { //mode 1=fetch page first
  http_request = false;
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {
      switch(mode) {
        case 1: http_request.overrideMimeType('text/html');
        case 2: http_request.overrideMimeType('text/xml');
        default: break; 
      }
      // set type accordingly to anticipated content type
      //http_request.overrideMimeType('text/xml');
      //http_request.overrideMimeType('text/html');
    }
  }
  if (!http_request) {
    alert('Cannot create XMLHTTP instance');
    return false;
  }
  switch(mode) {
    case 1: http_request.onreadystatechange = alertContents1;break;
    case 2: http_request.onreadystatechange = alertContents2;break; 
    default: break; 
  }
  alert(parameters);
  alert(url);
  http_request.open('POST', form_url, true); // define the type of posting page POST/GET
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");
  http_request.send(parameters);
}

function constructString(obj) { // this constructs are poststr from the object
  poststr="";
  var i=1,name="";
  for(j in obj) {
    name = j;
    val = encodeURIComponent(obj[j]);
    poststr += (i == 1) ? name+"="+val : "&"+name+"="+val; // 
    i++;
  }
  return poststr;
}

// alertContents1 goes and gets any values we might need from our form.
// in this example we won't need this function
// the example below goes and gets form_token and creation_time then puts them in our poststr
function alertContents1() {
  if (http_request.readyState == 4) {
    if (http_request.status == 200) {
      result = http_request.responseXML;
      var form = result.getElementById("user-profile-form");
      var action = form_url.replace(/\/user\/me\/edit/, form.getAttribute("action"));
      var inputs = form.getElementsByTagName("input");
      var inputdata = {}, inputname = "";
      for(var i = 0; i < inputs.length; i++) {
        inputname = inputs[i].name;
        inputvalue = inputs[i].value;
        inputdata[inputname] = inputvalue;
      }
      inputdata.signature = 'twilight';
      inputdata.op = 'Save';
      poststr = constructString(inputdata);
      makePOSTRequest(action, poststr,2); // the 2 indicates calling the second function to send the data we got back
    } 
    else {
      alert('There was a problem with the request.');
    }
  }
}

function alertContents2() {
  if (http_request.readyState == 4) {
    if (http_request.status == 200) {
      result = http_request.responseText;
//alert(result);
      alert("You have successfully submitted to the form"); 
    } 
    else {
      alert('There was a problem with the request.');
    }
  }
}

function get(obj) {
  poststr = "signature="+"twilight";//constructPoststr();
  makePOSTRequest(form_url, poststr, 1); // we only call this function if we want to run alertContents1 as well
  //makePOSTRequest(form_url, poststr, 2); // run only alertContents2
}