save all controls in ajax tab panel

Question

hi I have a multiple ajax tab panel like tab1tab2tab3. and teach tab having some controls like text box drop down and data grid. Initially i am working on tab1 and modified some text box value then without saving the tab1 i am trying to move some other tab in that time i need to get confirmation from user your data will lose if you move to some other tab so my issue is how to check all controls whether the value of any controls are changed by the user at client side.

Akkiraju Ivaturi · Answer

There is a concept in javascript. When a form is loaded each control will have property called defaultxxx. For example textArea it is defaultValue and so for all other controls. So when you are moving out of the tab you need to call the javascript function below: // * Returns true if any field in the form has changed. function isFormChanged(form){ var isChanged = false ; for (var i = 0; i { switch(form.elements[i].type) { case text : isChanged = isTextChanged(form.elements[i]) ; break; case select-one : isChanged = isSelectChangedOne(form.elements[i]) ; break; case select-multiple : isChanged = isSelectChangedMul(form.elements[i]) ; break; case radio : isChanged = isRadioChanged(form.elements[i]) ; break; case checkbox : isChanged = isCheckChanged(form.elements[i]) ; break; case textarea : isChanged = isTextAreaChanged(form.elements[i]) ; break; } if (isChanged) { break ; } } return isChanged ; } // ************************************************************************ // * Returns true if the select-one value has changed else returns false. // ************************************************************************ function isSelectChangedOne(selectbox) { var len = selectbox.options.length ; var defaultIndex = -1 ; for (var i = 0 ; i {if (selectbox.options[i].defaultSelected) {defaultIndex = i ; break; } } if (selectbox.size {if (defaultIndex == -1 && selectbox.selectedIndex == 0) return false; return (defaultIndex == selectbox.selectedIndex ) ? false : true ; } else {return (defaultIndex == selectbox.selectedIndex) ? false : true ; } } // **************************************************************************** // * Returns true if the select-multiple value has changed else returns false. // **************************************************************************** function isSelectChangedMul(selectbox) { var len = selectbox.options.length ; for (var i = 0 ; i { if (selectbox.options[i].selected != selectbox.options[i].defaultSelected ) { return true ; } } return false; } // ********************************************************************** // * returns true if the text value has changed else returns false. // ********************************************************************** function isTextChanged(textBox) { return (textBox.value == textBox.defaultValue) ? false : true ; } // ****************************************************************************** // * Returns true if the radio checked condition has changed else returns false. // ****************************************************************************** function isRadioChanged(radioButton) { return (radioButton.checked == radioButton.defaultChecked) ? false : true ; } // ***************************************************************************** // * returns true if checkbox checked condition has changed else returns false. // ***************************************************************************** function isCheckChanged(checkBox) { return (checkBox.checked == checkBox.defaultChecked) ? false : true ; } // ********************************************************************** // * returns true if the select value has changed else returns false // ********************************************************************** function isTextAreaChanged(textAreaField) { return (textAreaField.defaultValue == textAreaField.value) ? false : true ; }

Akkiraju Ivaturi · Answer

Happy to know that....

mohan · Answer

Thanks Bro.. Its Working perfectly for me. Thank you very much ..