Submit form without reload

Posted on 2004-10-06
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
  • 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-> among others
Iframes-> 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?
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));

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

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 125 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 ) :
   "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'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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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…

747 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