how to post form data in ajax way and without jquery or other libraries.

I want to define a ajaxForm function, which could serialize the form data and AJAX post, and then callback by javascript.

If I has form below:

<form action="url" method="POST">
<table>
<tr><td>label...</td><td><input name="input1" type="text"/></td></tr>
<tr><td>label...</td><td><input name="input2" type="checkbox"/></td></tr>
<tr><td>label...</td><td><select name="input3"><options....></select></td></tr>
</table>
</form>

and I got the form element by javascript, and then I pass the form element and callback function to ajaxForm(form, callback) function.

Any one could give a example of that ? Thanks a lot....

update : My most problem is how to serialize form data ?

update again: Thanks for all your response. Problem resolved.

I have migrated the jquery form plugin to pure javascript. and I am glad to share it with you guys.

.js

button.onclick = function(){
  ajaxForm(form, function(xmlhttp){
    alert(xmlhttp.status);
    alert(xmlhttp.responseText);
  });
}

how to post form data in ajax way and without jquery or other libraries.

I want to define a ajaxForm function, which could serialize the form data and AJAX post, and then callback by javascript.

If I has form below:

<form action="url" method="POST">
<table>
<tr><td>label...</td><td><input name="input1" type="text"/></td></tr>
<tr><td>label...</td><td><input name="input2" type="checkbox"/></td></tr>
<tr><td>label...</td><td><select name="input3"><options....></select></td></tr>
</table>
</form>

and I got the form element by javascript, and then I pass the form element and callback function to ajaxForm(form, callback) function.

Any one could give a example of that ? Thanks a lot....

update : My most problem is how to serialize form data ?

update again: Thanks for all your response. Problem resolved.

I have migrated the jquery form plugin to pure javascript. and I am glad to share it with you guys.

https://github./guileen/ajaxform.js

button.onclick = function(){
  ajaxForm(form, function(xmlhttp){
    alert(xmlhttp.status);
    alert(xmlhttp.responseText);
  });
}

• javascript
• ajax
• serialization

• 3 Serializing form data is a matter of grabbing the form, looping over its .elements properly and extracting all the data from it. You have to cope with determining which controls are successful (e.g. radio buttons are only successful if they aren't disabled and are checked) and get values from them (which is done differently for different types of elements (multiple select elements are a pain for example). It's the kind of long, boring task with lots of variables that is far far better done with an existing library where someone else has already thought about all this for you. – Quentin Commented Nov 3, 2010 at 6:27
• I decide to migrate jquery ajax form plugin to pure javascript. – guilin 桂林 Commented Nov 3, 2010 at 7:02
• 1 possible duplicate of form serialize javascript (no framework) – T.Todua Commented Dec 26, 2014 at 13:50

2 Answers 2

var http_request = false;
function makePOSTRequest(url, parameters) {
  http_request = false;
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
     http_request = new XMLHttpRequest();
     if (http_request.overrideMimeType) {
        // set type accordingly to anticipated content type
        //http_request.overrideMimeType('text/xml');
        http_request.overrideMimeType('text/html');
     }
  } else if (window.ActiveXObject) { // IE
     try {
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
        try {
           http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
     }
  }
  if (!http_request) {
     alert('Cannot create XMLHTTP instance');
     return false;
  }

  http_request.onreadystatechange = alertContents;
  http_request.open('POST', url, true);
  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 alertContents() {
  if (http_request.readyState == 4) {
     if (http_request.status == 200) {
        //alert(http_request.responseText);
        result = http_request.responseText;
        document.getElementById('myspan').innerHTML = result;            
     } else {
        alert('There was a problem with the request.');
     }
  }
}

// call me
function get(obj) {
  var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) +
                "&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value );
  makePOSTRequest('post.php', poststr);
}

For those using npm and browserify, this here fits the bill: https://github./defunctzombie/form-serialize