Submit form without reload

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?

best
Eric
pnoericAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
PaulPositionConnect With a Mentor Commented:
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 :)
0
 
ZylochCommented:
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

Regards,
Zyloch
0
 
pnoericAuthor Commented:
Ew! no frames, no iframes!! ;-) no other way, eh? all browsers have to do that reload?
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
ZylochCommented:
Yes. Basically, unless you use xmlhttp which isn't completely supported, but you want a try with it?
0
 
dij8Commented:
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.
0
 
pnoericAuthor Commented:
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.

best
Eric
0
 
unclearMindCommented:
Greetings,

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));
}

Regards
0
 
dij8Commented:
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. :-)
0
 
pnoericAuthor Commented:
Hmm. I think I found an example of what I mean. Check out this Amazon page:

http://www.amazon.com/exec/obidos/tg/detail/-/B0002LI11M/qid=1097309551/sr=8-1/ref=pd_ka_1/102-7226434-4822548?v=glance&s=music&n=507846

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?

E
0
 
PaulPositionCommented:
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..  )
0
 
PaulPositionCommented:
(argh, sorry subcribers for the many updates.. Forgot the link)
http://www.sitepoint.com/article/no-refresh-links/2
0
 
pnoericAuthor Commented:
Jackpot. That's what I was after. thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.