Simple ajax form using javascript no jQuery

Question

I'm working with a form for which the mark-up I can't change & can't use jQuery. Currently the form post the results to a new window. Is it possible to change this to an ajax form so that the results displays on submit instead without altering any mark-up? Pulling the results (mark-up) from the results page back to the form page.

Here is the mark-up for the form.

<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite" target="_blank"> <div class="form-item">     <fieldset class="form-radio-group">         <legend><span class="legend-text">What mobile phone is the best?</span></legend>                 <div class="form-radio-item">                     <input type="radio" class="radio" value="1225962377541" name="option" id="form-item-1225962377541">                     <label class="radio" for="form-item-1225962377541">                         <span class="label-text">iPhone</span>                     </label>                 </div><!-- // .form-radio-item -->                 <div class="form-radio-item">                     <input type="radio" class="radio" value="1225962377542" name="option" id="form-item-1225962377542">                     <label class="radio" for="form-item-1225962377542">                         <span class="label-text">Android</span>                     </label>                 </div><!-- // .form-radio-item -->                 <div class="form-radio-item">                     <input type="radio" class="radio" value="1225962377543" name="option" id="form-item-1225962377543">                     <label class="radio" for="form-item-1225962377543">                         <span class="label-text">Symbian</span>                     </label>                 </div><!-- // .form-radio-item -->                 <div class="form-radio-item">                     <input type="radio" class="radio" value="1225962377544" name="option" id="form-item-1225962377544">                     <label class="radio" for="form-item-1225962377544">                         <span class="label-text">Other</span>                     </label>                 </div><!-- // .form-radio-item -->     </fieldset> </div><!-- // .form-item --> <div class="form-item form-item-submit">     <button class="button-submit" type="submit"><span>Vote now</span></button> </div><!-- // .form-item --> <input type="hidden" name="c" value="News_Poll"> <input type="hidden" class="pollId" name="cid" value="1225962377536"> <input type="hidden" name="pagename" value="Foundation/News_Poll/saveResult"> <input type="hidden" name="site" value="themouth"> 

Any tips/tutorial is much appreciated. :)

Answer 1

The following is a far more elegant solution of the other answer, more fit for modern browsers.

My reasoning is that if you need support for older browser you already most likely use a library like jQuery, and thus making this question pointless.

/**  * Takes a form node and sends it over AJAX.  * @param {HTMLFormElement} form - Form node to send  * @param {function} callback - Function to handle onload.   *                              this variable will be bound correctly.  */  function ajaxPost (form, callback) {     var url = form.action,         xhr = new XMLHttpRequest();      //This is a bit tricky, [].fn.call(form.elements, ...) allows us to call .fn     //on the form's elements, even though it's not an array. Effectively     //Filtering all of the fields on the form     var params = [].filter.call(form.elements, function(el) {         //Allow only elements that don't have the 'checked' property         //Or those who have it, and it's checked for them.         return typeof(el.checked) === 'undefined' || el.checked;         //Practically, filter out checkboxes/radios which aren't checekd.     })     .filter(function(el) { return !!el.name; }) //Nameless elements die.     .filter(function(el) { return el.disabled; }) //Disabled elements die.     .map(function(el) {         //Map each field into a name=value string, make sure to properly escape!         return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);     }).join('&'); //Then join all the strings by &      xhr.open("POST", url);     // Changed from application/x-form-urlencoded to application/x-form-urlencoded     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");      //.bind ensures that this inside of the function is the XHR object.     xhr.onload = callback.bind(xhr);       //All preperations are clear, send the request!     xhr.send(params); } 

The above is supported in all major browsers, and IE9 and above.