javascript: how to serialize form data to string without jquery or other libraries

Question

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.com/guileen/ajaxform.js

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

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, Nov 03 '10 at 06:27
I decide to migrate jquery ajax form plugin to pure javascript. — guilin 桂林, Nov 03 '10 at 07:02
possible duplicate of [form serialize javascript (no framework)](http://stackoverflow.com/questions/11661187/form-serialize-javascript-no-framework) — T.Todua, Dec 26 '14 at 13:50

score 0 · Answer 1 · edited Jun 19 '12 at 19:47

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);
}

This doesn't address the key part of the question (as per the edits that took place twenty minutes before this answer and appear in a huge font)... and it uses globals! At least it does make a POST request. — Quentin, Nov 03 '10 at 08:07

score -1 · Answer 2 · answered Aug 15 '14 at 09:29

-1

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

answered Aug 15 '14 at 09:29

kaore

1,288
9
14

The question did ask without jQuery or other libraries. – Branco May 14 '21 at 18:06

javascript: how to serialize form data to string without jquery or other libraries

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

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

2 Answers2