Posted By

FatFolderDesigner on 11/24/10

Tagged

ajax
forms

Versions (?)

Last Edited at 11/24/10 05:14pm

Statistics

Viewed 903 times

Favorited by 1 user(s)

Related snippets

AJAX form autosubmit

/ Published in: JavaScript

I was working on this for a new site ideal I have, though it might be useful for others. What this does it sent a AJAX POST request every time the as() function is called. Setting the form to run as() onkeyup will essentially make the form submit itself whenever updated. I play to use this as part of an auto submit save system.

You could also eave the method and action of a form blank and have it run this with an onclick on the submit button, submitting the form only when they want to but keeping them on the page.

UPDATE: demo of this working available at the URL.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

function as(){
	var input = document.getElementById('form').elements
	var param = 'savetype=auto';
	for(var i=0; i!=input.length; i++){
		if(input[i].type != 'submit'){
			param = param+'&'+input[i].name+'='+input[i].value
		}
	}
	var ass=new XMLHttpRequest();
	ass.open('POST','save.php',true);
	ass.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	ass.setRequestHeader("Content-length", param.length);
	ass.setRequestHeader("Connection", "close");
	ass.send(param);
	ass.onreadystatechange = function() {
		if(ass.readyState == 4 && ass.status == 200) {
			alert('your response code goes here');
		}
	}
}