Reset and clear the HTML form after submitting – when you hit browser’s back button

This is a small issue but sometimes important. Well this is not a major post by me nor a major find, but I did run into some trouble while trying this particular thing out. Hence thought of recording it somewhere, so that I do not have to re-invent the wheel again. Here is the use case – there is an HTML form which is to be filled up and submitted to a server side script (let’s say some PHP code). After successful submission the user hits the back button of the browser. All the form fields and values should be reset and set to its initial configuration.

I tried several different techniques and implementations but ran into some or the other problems mainly because of browsers – different browsers behaving differently. On some browsers something works while on the others it does not. Thanks to these differences in spite of a universal and a common W3C standard. But I finally found a rather easy solution and cached onto it. This post will talk on that particular method with an example.

So the clue is very simple – reset the form after it is submitted so that when the user hits the back button every field in the form is initialized and reset (no previous values are left behind). How?? Let’s see in this example,

Return multiple values from a function using a JSON Object

Quick example of how a function can return multiple values using a JSON object.
Sometimes even a good developer gives a second thought on how to return multiple values from within a function to a script that’s calling the function. Let’s go behind the scenes and very briefly reveal the secrets.

JavaScript Object – JSON object – What is that?
A JSON object has a key-value pair structure. It is this feature that helps store multiple values in multiple corresponding keys within the JSON object. Not only that you can store multiple data types within one JSON object. Let’s see an example,

var json_object = {
  key1: "value1", //stores a string value
  key2: value2, //stores a number data type value
  key3:true //stores a boolean type value
}

Since you can store multiple values within one object so if you return this JSON object variable then you are also returning multiple values at once isn’t it. Let’s see how to do it.

Return a JSON Object

function func1() {
  var myObj = returnValues(2, "string");
  alert("Value1 returned: " + myObj.a);
  alert("Value2 returned: " + myObj.b);
}

function returnValues(value1, value2) {
  var newValue1 = value1 * 2;
  var newValue2 = "returned " + value2
  var return_object = {
    a:newValue1,
    b:newValue2
  };
  return return_object;
}

I have an example code above where the function returnValues() returns a JSON object to the function – func1(). Within func1() I am calling the function returnValues() and passing two parameters – value1 which is a number and value2 which is a string value. Inside returnValues() function I just manipulate the parameters passed to it and create two new values out of it. The two new values (newValue1, newValue2) are then assigned to two keys of our JSON object –  return_object. Finally the JSON object is returned by the function. This way I am passing a number and a string- multiple values and multiple types.
Now within func1() we can access the values passed to it by the accessing the object keys using the DOT operator. This is how to do it.

alert("Value1 returned: " + myObj.a);
alert("Value2 returned: " + myObj.b);

This way you can return as many values as you want.

Pass parameters from HTML to Flex/Flash: Dynamic video player example

A quick example of passing parameters from HTML/Javascript dynamically to Flex/Action Script or Flash in some cases using flashvars. You can use it with any Flash based platform. Check out the demo first and then I will explain:

Demo Link: http://jbk404.site50.net/flex/htmlparameter/

What we have here is that there are two buttons in an HTML page. Each button when clicked plays a different video in the same Flex Video Player (which runs in a .swf file and uses the Flash plugin to render). So what I am doing is that on click of the button I call a javascript function wherein I pass the corresponding video URL as parameter to the Flex Video Player (which is a .swf file) using flashvars. This is how I am doing it,

<param name="flashvars" value="videoURL=videos/video' + target_obj.id + '.flv" />

target_obj.id is the id of the button clicked. The parameter is passed as a key-value pair. videoURL holds the dynamic URL of the video. There is one flash file (.swf) which reads the parameter passed in flashvars and then plays the video. This way multiple videos play in the same player.  I have named the videos as video1.flv and video2.flv which are inside videos folder under my root directory. Note that Flex/Flash video player runs a .flv format. When you look at the demo you might notice that a popup shows the video URL inside the player. That’s where it is getting the URL as parameter from HTML side. Also the video is auto played.