Dear Rosalind,

I am in a position to help you with a problem you have on your web page.

Currently, a reader scrolls halfway down the page, sees the Email subscription, and submits it, but when they submit it, the entire page reloads, which can be very disorienting, especially for people with slow connections who have to wait to get back to where they were.

I can, however, provide you with the HTML and Javascript code that will enable readers to submit the form, see that they've submitted the form while it's being processed, and see the results, right there in that box, so that they can just keep on reading without reloading the page.

Nick Chase
Backstop Media
http://www.backstopmedia.com

Although I had coded the page so that visitors ended up in the very place where they had left off, I really appreciated Nick's suggestion and assistance.

Here is the code that Nick supplied to avoid the page reload, and how you can do it too.

1) Visit Google Maps API and get a 'key'.

2) Substitute YOURGOOGLEKEY in the script below and place the script within the metatags on your page.

<script src="http://maps.google.com/maps?file=api&v=1&key=YOURGOOGLEKEY" type="text/javascript"></script>

3) Place the following code below your Aweber Autoresponder signup form code on the page.

<script type="text/javascript">

function addLead(theForm){

  //First, let the user know something's happening so they don't submit again.   document.getElementById("addLeadText").innerHTML = "Adding you to the mailing list...";

  //Now create the actual request.
  var request = GXmlHttp.create();

  //You'll likely want to change "test.php" to "http://aweber.com/scripts/addlead.pl   request.open('post', 'http://aweber.com/scripts/addlead.pl', true);

  //This part watches for the response to come back, then drops the text into the page
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      document.getElementById("addLeadText").innerHTML = request.responseText;
    }
  };


  //Now we build the data from the form into the request itself.
  var postString = "";
  for (i = 0; i < theForm.elements.length; i++){
     postString = postString + theForm.elements[i].name + "=" + URLencode(theForm.elements[i].value) + "&";
  }
 
  //Then we tell the request how to let the server know what we're doing.
  request.setRequestHeader("Content-Length", postString.length);
  request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

  //Finally, we send the request.
  request.send(postString);
}

   function URLencode(sStr) {
     return escape(sStr).replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');
  }


</script>

Voila! No more reloading.

Cheers,
Ros