Modifying form data during unload – does it ever work?

There might arise some requirement to change the form data being posted using JavaScript. So naturally, the first attempt would be to use unload event on the window/document. And then in the event handler, change the form data.

It would be done, if using jQuery, in the following manner.

   1: $(window).unload(function()

   2: {

   3:    addAndSet("#formValue");

   4: });

   5:  

   6:  

   7: //function that adds an option to selectbox.

   8: //also sets the newly added value as the selected one!

   9: function addAndSet(item)

  10: {

  11:     var current = $(item);

  12:     current.append($('<option></option>').

  13:                        val('-214783').

  14:                        html('defaulted').

  15:                        attr('selected','true')

  16:                    );

  17:     current.removeAttr('disabled'); 

  18:     //the current should not disabled.

  19:     // if disabled, the selection does not apply.

  20: }

The above script also shows how to add a new OPTION to a HTML Select Box (DropDownList/Listbox/ComboBox). It sets the value as a fixed one and html as fixed too. And then it sets the “selected” attribute to true. You can modify this method based on your requirement. Note that it uses jQuery so you should be including the appropriate jQuery.js file. It also removes the disabled attribute since the selection would not work if the control was disabled.

Would this work? If not, why?

Well! No. The reason is – the unload on the window would be invoked and by that time the form data is already posted to the server. So your goal to change the form data would not be met since the data is already posted. I have tested with document.unload as well and the result is still the same.

Workaround?

This would be the workaround that worked for my situation – I had a submit button which would be clicked by the user to submit the form and then then some checks has to be performed. So I invoked the addAndSet in the click event of the submit button and then it works like a charm. This makes sense since the event handler is executed before the form data is posted.

My code looks something like this.

   1: $("#actReport").click( function () {                 

   2:                  var itName = document.forms[0].itName;

   3:                  var itGroup = document.forms[0].itGroup;

   4:                  if(itName.value.length > 0){

   5:                    //add option to itGroup

   6:                    addAndSet("#itGroup");                   

   7:                  }

   8:                  else if(itGroup.value.length > 0){

   9:                    addAndSet("#itName");                   

  10:                  }     

  11:             } 

  12:         );

Shown above in the lines 2-3 is the way you could access your form data using traditional JavaScript.

Note that if its a listbox, then the “value” property does not return all the values selected. Instead, it just returns the first selection in your box. For my purpose, checking the length works. If no option is selected the length would be 0 and if some option is selected, the length be the “length of the value(number of characters in the value)”.