How to post a form via POST using AJAX | Samir Patel - Web Applications Developer, Belmont NC 28012 * 704-345-2040

Programming menu

Links

Home

Articles

Programming

How to post a form via POST using AJAX

Tag it:

unction submitEditProfileNameDetailsAjax(){
	if(validatemyNameForm()){
				$('editNameDetailsSubmitButtonDiv').innerHTML = '<img src="images/spinner.gif" mce_src="images/spinner.gif">';
				//$('NameForm_res').innerHTML = "";
				var url = 'name_of_page_that_accepts_post.php';
				var Name_Prefix = $('Name_Prefix').value;
				var fi = $('fi').value;
				var Name_First = $('Name_First').value;
				var second_name = $('second_name').value;
				var Name_Middle = $('Name_Middle').value;
				var Name_Last = $('Name_Last').value;
				var Name_Suffix = $('Name_Suffix').value;
				var nick_print = $('nick_print').value;
				var Title = $('Title').value;
				var title_badge = $('title_badge').value;
				var web_edit_fields = $('web_edit_fields').value;
				var detailsId = $('detailsId').value;
				//create the params for AJAX POST				
				var params = "Name_Prefix="+Name_Prefix+"&fi="+fi+"&Name_First="+Name_First+"&second_name="+second_name+"&Name_Middle="+Name_Middle+"&Name_Last="+Name_Last+"&Name_Suffix="+Name_Suffix+"&nick_print="+nick_print+"&Title="+Title+"&title_badge="+title_badge+"&web_edit_fields="+web_edit_fields+"&detailsId="+detailsId;
				xmlHttp = GetXmlHttpObject1();
				xmlHttp.open("POST", url, true);
				xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xmlHttp.setRequestHeader("Content-length", params.length);
				xmlHttp.setRequestHeader("Connection", "close");
				
				
				xmlHttp.onreadystatechange = function() {//Call a function when the state changes.
					if(xmlHttp.readyState == 4) {
						$('editNameDetailsSubmitButtonDiv').innerHTML = '<input name="button" class="button_blue" id="editNameDetailsSubmitButton" value="Save Changes to Name" onclick="submitEditProfileNameDetailsAjax()" type="submit">';
						$('NameForm_res').innerHTML = "";
						//update the values of the textboxes and drop downs to reflect the new values
						$('responseForNameForm').innerHTML = xmlHttp.responseText;
						if($('getMemberYooLoginDetailsModule')){
							$('memberYooLoginDetailsModule').innerHTML = $('getMemberYooLoginDetailsModule').innerHTML;	
						}
						$('NameForm_res').innerHTML = '<span class="info">Changes to your name details have been saved.</span>';	
					}
				}
				xmlHttp.send(params);
	}
}

Comments

Only registered users can write comments!

Last Updated ( Monday, 15 December 2008 )

< Prev		Next >

[ Back ]