?
Solved

Ajax Submit Form to hidden Div

Posted on 2007-07-31
6
Medium Priority
?
3,289 Views
Last Modified: 2013-11-19
I'm looking for a way to have a form within a div.

On Submit should display a hidden div and load the results in there

I'm assuming it would be something like

onSubmit="getElementByID('hiddenDIV').display='block';getElementByID('hiddenDIV').innerHTML=scriptToPardeResults.asp"

Any ideas?
0
Comment
Question by:trickyidiot
6 Comments
 
LVL 48

Expert Comment

by:hernst42
ID: 19604253
You can't send a form to a hidden div. You can only send a form to an iframe. If you use AJAX, the the AJAX framework should take responsibility of packing the form data to the AJAX request and should also update the hidden div with the response from the AJAX-Request
0
 
LVL 6

Author Comment

by:trickyidiot
ID: 19604341
I figured it out - you're wrong on that one

the only problem I'm having now is how to take a form onSubmit and after it runs the javascript function I specify, to not submit the form at all.

Ideas?

0
 

Expert Comment

by:Yawny
ID: 19606086
Hi,
You may wish to try my codes below instead. =)

onSubmit="document.getElementByID('hiddenDIV').style.display='block';document.getElementByID('hiddenDIV').contentWindow.document.body.innerHTML=scriptToPardeResults.asp"
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19607286
@Yawny: How would that work?
0
 
LVL 1

Expert Comment

by:derelict_debris
ID: 19620476
so, there's a couple ways to do this... I assume you can create functions within a script tag or include external .js files in your page?  you'll want two functions -- one that sends the desired message to the server and one that gets the response and modifies your hiddenDIV... like this:

// function to send data to .asp page
function sendData() {
  var ajax = false;
  try {
    ajax = new XMLHttpRequest();
  } catch(e) {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if(!ajax) {
    alert('ajax unsupported!');
    return false;
  }
  ajax.onreadystatechange = function() {
    if(ajax.readyState == 4) {
      if(ajax.status == 200) {
        receiveData(ajax.responseText);
      } else {
        alert('ajax returned bad status: '+ajax.status);
        return false;
      }
     }
  }
  // assumes you're not passing params -- ask again if you need to know how to do this
  ajax.open('GET','scriptToPardeResults.asp',true);
  ajax.send(null);
  return false;
}

// function to receive data, fill hiddenDIV with results
function receiveData(data) {
  document.getElementById('hiddenDIV').innerHTML = data.responseText;
}


then your onsubmit just looks like:
onsubmit="return sendData();"

notice that the function always returns false -- if an onsubmit for a form returns false then the form will not actually do its normal submit, but the ajax should run as intended...

HTH - derelict
0
 
LVL 1

Accepted Solution

by:
derelict_debris earned 1500 total points
ID: 19620964
oops! -- in my 'receiveData' function, remove the '.responseText' in 'data.responseText' (we're only sending the responseText in the first place)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Ready to get certified? Check out some courses that help you prepare for third-party exams.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month17 days, 6 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question