Using Javascript to POST data between pages

The following is a simple example of how to submit data from one HTML page to another using the POST method from Javascript. Normally, if data needs to be sent from one HTML page to another, it is done by appending the information to the query parameter of the the URL in the familiar “name=value” format. e.g.

< href="post.aspx?user=peter&cc=aus">Click</a>

Although this works fine, in most cases, problems occur when there is a lot of data to send and the URL exceeds about 2000 characters. The other disadvantage is that the URL looks ugly. The traditional method to get around this is to POST the data using a form. e.g.

<form name="myform" method="post" action="post.aspx">
<input name="user" value="peter"/>
<input value="cc" value="aus"/>
<a href="javascript:myform.submit()">Click</a>
<form>

This works fine, however, it does tend to make the formatting of the resulting HTML difficult and increases the size of the final HTML page significantly if there are lots of links on it.

The following javascript function takes the URL of the target page and an associative array of name/values paires and POSTs the data to the supplied URL by dynamically creating a form and then submitting it.

function postwith (to,p) {
  var myForm = document.createElement("form");
  myForm.method="post" ;
  myForm.action = to ;
  for (var k in p) {
    var myInput = document.createElement("input") ;
    myInput.setAttribute("name", k) ;
    myInput.setAttribute("value", p[k]);
    myForm.appendChild(myInput) ;
  }
  document.body.appendChild(myForm) ;
  myForm.submit() ;
  document.body.removeChild(myForm) ;
}

To insert a link into a page just use a normal anchor tag in the HTML and call the function.

<a href="javascript:postwith('post.aspx',{user:'peter',cc:'aus'})">click</a>

This works on Microsoft IE, Mozilla Firefox and OS X Safari.

Toggle display of DIV in IE and Mozilla

The following code will toggle the display (show/hide) of a division in both IE 5.5+ and Mozilla Firefox and can be used for menus, TOC’s etc. This is simple, but useful. If your looking for a really good collection of cross browser Javascript functions for manipulating HTML and the DOM then check out prototype and if you want a really good overview of the Javascript language, along with some good stories and history of the language, you must see these videos from Dougles Crockford .

function td(d)
{
   if(document.getElementById) {
      var o = document.getElementById(d) ;
      if((o.style.display == "block") || (o.style.display == ""))
         o.style.display = "none" ;
      else
         o.style.display = "block" ;
   }
}

How to submit a HTML form with the Enter Key

If your form does not have a SUBMIT button then, in some cases the browser will not automatically submit the form when you press ENTER. Here is how to submit the form when the user presses the ENTER key.

The code simply intercepts all the key presses on the page and when the ENTER key is pressed if submits the form by calling the appropriate JavaScript function. In this case submitForm(), however, it could be any other function. This function works on Mozilla and Internet Explorer (IE).

document.onkeypress = processKey;

function processKey(e)
{
  if (null == e)
    e = window.event ;
  if (e.keyCode == 13)  {
    submitForm() ;
  }
}

Finding a form element in a DIV using it’s name in Netscape 4

Netscape 4 is a little more complexity compared with the current (2004+) browser object models, as all HTML form fields that appear in divisions (DIV tags) actually exist in layers. i.e.

<div name="myDiv">
<form method="get" action="doit.jsp" name="myForm">
<input type="text" name="myInput">
</form>
</div>

A field in a DIV named myDiv will actually exist in the following location. The trick is that the layer object myDiv actually contains a seperate document that can be addressed just like any other document. It is also important to note that Netscape 4 does not allow forms to span divisions, so keep the form and the fields all in the say DIV tag.

obj = document.myDiv.document.myForm.myInput;

The following JavaScript will iterate over all the fields in all the DIV’s (layers) in the document and then iterate over all the forms and fields.

var s = "" ;
for(i = 0; i < document.layers.length; i++)
{
  s += "L" + i + ":" + document.layers[i].name + "(" ;
  l = document.layers[i] ;
  for(f = 0; f < l.document.forms.length; f++)
  {
    s += "F" + f + ":" + l.document.forms[f].name + "[" ;
    f = l.document.forms[f] ;
    for(e = 0; e < f.elements.length ; e++)
    {
      s += " E" + f + ":" + f.elements[e].name ;
    }
    s += "]"
  }
  s += ")" ;
}