Use JavaScript to record users' changes in the form

Trackchanges. JS: use JavaScript to record users' changes in the form

Principle:
1. Generate a false input element for each field (except submit/reset/button/image) in form to save the initial values of each element in form during page loading.

2. Before submitting the form, compare each field in the form with the false input element generated in the previous step, and record the difference between the two (diff ). Merge all the differences and assign values to another new input element.

In this way, the content modified by the user during the foreground operation can be submitted together with the form to the server for processing.

1. trackchange. js

 

 

/*************************************** *******************
Trackchanges v0.1 by lhelper <lhelper at gmail dot com>

 

Track changes of client end form fields
1. append dummy input fields onto the raw form, which has
The Origianl value, checked status, etc. As the real one

2. Compare the dummy input fields with the originals, record
The changes (Unix/Linux diff format) with one more real
Field, whose name is '_ tc_c' (default)
**************************************** ******************/
VaR trackchanges = {
Initialize: function _ Init (FRM ){
If (! FRM) {// smart check
Return;
}
VaR eles = FRM. elements;
For (VAR I = 0, n = eles. length; I <n; I ++ ){
VaR ele = eles [I];
// Alert (Ele. tagname + ":" + ELE. Type + ":" + ELE. Name + ":" + ELE. value );
// 1. Omit the submit button (submit, reset, button, image, etc .)
If (Ele. tagname = "input "){
If (Ele. type = "Submit" ELE. type = "reset" ELE. type = "button" ELE. type = "image "){
Continue;
}
If (Ele. type! = "Checkbox" & ELE. type! = "Radio" & document. getelementsbyname (Ele. Name). length> 1 ){
Alert ("there are" + document. getelementsbyname (Ele. name ). length + "field elements with the same name (" + ELE. name + "), which can result in unbelievable output! ");
Return false;
}
}

 

// 2. append dummy field _ tc_f [ELE. Name] [ELE. ID] [0] onto the form
VaR OBJ = Document. createelement ("input ");
OBJ. type = "hidden ";
// Obj. type = "text ";
If (Ele. tagname = "input" & (Ele. type = "checkbox" ELE. type = "radio ")){
If (! Ele. ID ){
Ele. ID = ELE. Name + "_" + ELE. value;
}
OBJ. Name = "_ tc_f [" + (Ele. type = "checkbox ")? "Checkbox": "radio") + "] [" + ELE. Name + "] [" + ELE. ID + "] [0]";
OBJ. Checked = ELE. checked;
} Else {
If (! Ele. ID ){
Ele. ID = ELE. Name;
}
OBJ. Name = "_ tc_f [input] [" + ELE. Name + "] [" + ELE. ID + "] [0]";
}
OBJ. value = ELE. value;
OBJ. Disabled = true;
FRM. appendchild (OBJ );
}
},

 

Recordchanges: function _ diff (FRM, FN ){
If (! FRM) {// smart check
Return;
}
VaR cmsdiff = "";
For (VAR eles = FRM. Elements, I = 0; I <eles. length; I ++ ){
VaR Re = new Regexp ("_ tc_f //[(.*?) //] // [(. *?) //] // [(. *?) //] // [0 //] ");
VaR m=re.exe C (eles [I]. Name );
If (M = NULL ){
Continue;
}
If (M [1] = "checkbox" m [1] = "radio "){
If (document. getelementbyid (M [3]). Checked! = Eles [I]. Checked ){
Cmsdiff + = "<" + M [3] + ":" + eles [I]. checked + "/n ----------/N" + ">" + M [3] + ":" +! Eles [I]. Checked + "/n ";;
}
} Else {
If (document. getelementbyid (M [3]). value! = Eles [I]. Value ){
Cmsdiff + = "<" + M [3] + ":" + eles [I]. value + "/n ----------/N" + ">" + M [3] + ":" + document. getelementbyid (M [3]). value + "/n ";;
}
}
}
// Alert (cmsdiff );
VaR OBJ = Document. createelement ("input ");
OBJ. type = "hidden ";
// Obj. type = "text ";
OBJ. Name = (FN )? FN: "_ tc_c ";
OBJ. value = cmsdiff;
FRM. appendchild (OBJ );
}
};

 

 

2. Usage:

 

 

<Script language = JavaScript>
<! --
Function _ submit (FRM ){
// Record user modified content
Trackchanges. recordchanges (FRM );

 

FRM. method = "Post ";
FRM. Action = "news_edit_save.jsp ";
Return true;
}
// -->
</SCRIPT>
......

 

<Form method = "Post" Action = "/dev/null" name = "news_info" onsubmit = "Return _ submit (this)">
<Input type = "text" name = "news_title" maxlength = "50" value = "">
......
<Input type = "Submit" value = "Confirm input" name = "btnsave" class = "Submit">
</Form>

 

<Script language = "JavaScript">
<! --//
// Initialize tackchanges
Trackchanges. initialize (document. news_info );
// -->
</SCRIPT>