Jump to content

Ajax Submiting Form and getting the restuls within the same div


jattsurma

Recommended Posts

Hello Everyone,

 

I have a little trouble figuring out something. I was hoping that one of the masterminds out there can help me out. Here is what I'm trying to do:

 

I got an Ajax script from dynamic drive. This script opens a page within a div. Here is the script:

 

 

<script type="text/javascript">

 

/***********************************************

* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/

 

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)

var loadedobjects=""

var rootdomain="http://"+window.location.hostname

var bustcacheparameter=""

 

function ajaxpage(url, containerid){

var page_request = false

if (window.XMLHttpRequest) // if Mozilla, Safari etc

page_request = new XMLHttpRequest()

else if (window.ActiveXObject){ // if IE

try {

page_request = new ActiveXObject("Msxml2.XMLHTTP")

}

catch (e){

try{

page_request = new ActiveXObject("Microsoft.XMLHTTP")

}

catch (e){}

}

}

else

return false

page_request.onreadystatechange=function(){

loadpage(page_request, containerid)

}

if (bustcachevar) //if bust caching of external page

bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()

page_request.open('GET', url+bustcacheparameter, true)

page_request.send(null)

}

 

function loadpage(page_request, containerid){

if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))

document.getElementById(containerid).innerHTML=page_request.responseText

}

 

function loadobjs(){

if (!document.getElementById)

return

for (i=0; i<arguments.length; i++){

var file=arguments

var fileref=""

if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding

if (file.indexOf(".js")!=-1){ //If object is a js file

fileref=document.createElement('script')

fileref.setAttribute("type","text/javascript");

fileref.setAttribute("src", file);

}

else if (file.indexOf(".css")!=-1){ //If object is a css file

fileref=document.createElement("link")

fileref.setAttribute("rel", "stylesheet");

fileref.setAttribute("type", "text/css");

fileref.setAttribute("href", file);

}

}

if (fileref!=""){

document.getElementsByTagName("head").item(0).appendChild(fileref)

loadedobjects+=file+" " //Remember this object as being already added to page

}

}

}

 

</script>

 

That is within my <head></head> tags and it does its job. I'm using it to open 3 different forms in the same div, for example:

 

 

<a href="javascript:ajaxpage('form1.php', 'contentarea');">Form #1</a>

<div id="contentarea"></div>

 

 

<a href="javascript:ajaxpage('form2.php', 'contentarea');">Form #2</a>

<div id="contentarea"></div>

 

 

<a href="javascript:ajaxpage('form3.php', 'contentarea');">Form #3</a>

<div id="contentarea"></div>

 

Up to this point everything is good. Here is the problem:

 

Every form has an action and a submit button. When I press the submit button, the result appears on a different page and I want it to appear in the same "contentarea" div.

 

Can anyone suggest what should I do?

 

Thanks in advance for your help.

 

Regards

Jatt Surma!

Link to comment
Share on other sites

I'd use jquery and use either .prependTo, .appendTo, or .html, whichever is most appropriate for your intent. 

 

prependTo will place the new content at the beginning of the referenced div

appendTo will place the new content at the end of the div,

.html will replace the contents of the div with the referenced content. 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.