Ajax Submit Form to hidden Div

Posted on 2007-07-31
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


Any ideas?
Question by:trickyidiot
    LVL 48

    Expert Comment

    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
    LVL 6

    Author Comment

    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.



    Expert Comment

    You may wish to try my codes below instead. =)

    LVL 75

    Expert Comment

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

    Expert Comment

    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) {
          } 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'GET','scriptToPardeResults.asp',true);
      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
    LVL 1

    Accepted Solution

    oops! -- in my 'receiveData' function, remove the '.responseText' in 'data.responseText' (we're only sending the responseText in the first place)

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Problem to be resolved in this article Currently, development of website and web application can be done without writing thousands of lines of programming code by hand. Description This can be done through by using a open source framework such …
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    754 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

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now