Submit form without reload

Posted on 2004-10-06
Medium Priority
Last Modified: 2008-01-09
hey, I have a CSS popup that appears on a page with a small form... I'd like the user to be able to pick something from the form, and have that submitted via HTTP... but I Don't want the whole page to reload; I would just hide the CSS popup at that point and the main page of the site would be behind it, ready to go. make sense? the problem I have is that the browser wants to reload after an http post. any suggestions on how to get around that? seems like I've seen this done someplace but I'm not sure how. Javascript?

Question by:pnoeric
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +2
LVL 36

Expert Comment

ID: 12245609
Hi pnoeric,

It's possible with frames or iframes. Or do you not want to use them?

Frames->http://wp.netscape.com/assist/net_sites/frames.html among others
Iframes->http://webmonkey.wired.com/webmonkey/96/37/index2a.html?tw=authoring among others


Author Comment

ID: 12245686
Ew! no frames, no iframes!! ;-) no other way, eh? all browsers have to do that reload?
LVL 36

Expert Comment

ID: 12245697
Yes. Basically, unless you use xmlhttp which isn't completely supported, but you want a try with it?
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

LVL 10

Expert Comment

ID: 12245770
What do you want to happen with the posted form data?  If it has an effect on what the resulting page shows then the page must be reloaded.  If it is information that will be sent on later then you could use javascript to retrieve the values and store them somewhere, hidden form fields or cookies maybe.  If it is to change the style of the page like colours et c. then you could again use javascript to change the class names of the content you want to change.  Changing class names has limited support I believe.

A simple script I have that changes the class of an object is as follows:
function changeclass(theobject, theclass) {
  if (document.getElementById) {document.getElementById(theobject).className = theclass}
  else if (document.all) {document.all[theobject].className = theclass}

theobject being the id of the element you want changed.

Author Comment

ID: 12245791
Thanks dij8. I think cookies might be my answer, but can cookies be dropped after a page is drawn?! The data I'm storing is a code that is used on a totally different page, so nothing that impacts the current page, nothing to do with the page design, etc.


Expert Comment

ID: 12245958

As far as I know you can handle cookies via JavaScript quite easy.
The core of this technique is the document.cookie object

The basic interactions are:

Set a cookie : document.cookie = "myCookieName=myCookiesValue";
Retrieve the value of a cookie : alert(document.cookie)

Well, not exactly cause the Object document.cookie holds all the cookies
in pairs of names and values
So in order to get a specific cookie you have to create a function like this:

function getCookie(name) {
  var allCookies = document.cookie;
  var prefix = name + "=";
  var begin = allCookies.indexOf("; " + prefix);
  if (begin == -1) {
    begin = allCookies.indexOf(prefix);
    if (begin != 0) return null;
  } else
    begin += 2;
  var end = document.cookie.indexOf(";", begin);
  if (end == -1)
    end = allCookies.length;
  return unescape(allCookies.substring(begin + prefix.length, end));

LVL 10

Expert Comment

ID: 12246835
Another cookie settings script which might be helpful:
function setcookie(cname,cv,age) {
  if (age) {
    var today = new Date()
    cexp = new Date(today.getTime() + (age*24*60*60*1000));
    document.cookie = cname + "=" + escape (cv) + "; expires=" + cexp.toGMTString() + "; path=/"
  } else {
    document.cookie = cname + "=" + escape (cv) + "; path=/"
function getcookie(cname) {
  var c = document.cookie
  cs = c.indexOf(cname)
  if (cs!=-1) {
    ce = (c.indexOf(";",cs)>0)? c.indexOf(";",cs):c.length
    cv = unescape(c.substr(cs+cname.length+1,ce-(cs+cname.length+1)))
    return cv
  } else {
    return false
function deletecookie(cname) {
  cexp = new Date()
  cexp.setTime(cexp.getTime() -1)
  document.cookie = cname + "=; expires=" + cexp.toGMTString()

Probably the key thing with setting cookies is the path.  Unless you have specific reasons not to, set the path to the root of the website(/).  The basics of setting a cookie using JavaScript is the "document.cookies = ..." function.  It works something like this:
seperate properties using semicolons (;).  There are more than below but these should be sufficient.
document.cookie = "CookieName=CookieValue; expires=DateTimeToExpire; path=/"

Where CookieName can be whatever you want, CookieValue is the value you want the cookie to hold.
DateTimeToExpire is a date in a specific format.  JavaScripts toGMTString() function does this for you.  My line of code "cexp = new Date(today.getTime() + (age*24*60*60*1000));" gets todays date and time and basically adds a number of days (age being the number of days you wish the cookie to last).  The numbers you see there are hours, minutes, seconds, milliseconds to total a single day.

Not trying to outdo you there unclearMind, just adding an alternative. :-)

Author Comment

ID: 12265462
Hmm. I think I found an example of what I mean. Check out this Amazon page:


On the far left column, about 1/2 way down, there's a place ot rate the music-- 1 through 5 stars, a coupl eof checkboxes.

When you click those it looks liek something is being saved/sent back to the server. But the entire page doesn't reload.

No frames, no iframes. How're they doing this?


Accepted Solution

PaulPosition earned 500 total points
ID: 12266252
The Amazin' Amazon trick...

They link to a page that returns HTTP 204 message which means 'data received but no content to transmit back : keep using current page' to the browser...
(that's quoted from http://www.artima.com/forums/flat.jsp?forum=121&thread=6008 ) :
   "I found the spec entry on http 204: RFC 1945 - Hypertext Transfer Protocol -- HTTP/1.0: 204 No Content The server has fulfilled the request but there is no new information to send back. If the client is a user agent, it should not change its document view from that which caused the request to be generated. This response is primarily intended to allow input for scripts or other actions to take place without causing a change to the user agent's active document view. The response may include new metainformation in the form of entity headers, which should apply to the document currently in the user agent's active view.
   "So in short, you can submit information to the server and not have to do a page rebuild. Which is a nice trick for functionality like in the Amazon example - they have a "Saved" message that they make appear so the user knows something happened...."
One thing to note : you really NEED to use some javascript or something so you can 'tell' your user that his clicking on the submit button *did* send the information. Else he might just sit there and click until he's blue in the face)

I don't know what server technology you're using, but it shouldn't be too difficult to google something out of those informations :)

Expert Comment

ID: 12266436
Just to add to that, here's an more in-depth article about the technique, with code samples in both PHP and ASP.

(As an aside, I didn't know about 'no refresh link' or such. But after reading your last msg. I simply loaded the 'live-http-headers' from mozilla and looked at what was sent-received when clicking the amazon.com's 'rate this album' link. 'HTTP 204' was new to me, so a little search got us our info..  )

Expert Comment

ID: 12266438
(argh, sorry subcribers for the many updates.. Forgot the link)

Author Comment

ID: 12267073
Jackpot. That's what I was after. thanks!

Featured Post

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

777 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