How to Change Color of Text that is updated on a web form?

[d_viper_01]

How can I create a web form that tracks changes made to data previously entered? For e.g., if I have an Input Text Field called Description on a web form, and if this field is already populated by data being pulled from a database, how can I make the color of the text turn to Red when I make a change or add to the field? I only want the text that is added or changed to turn red. I know how to change the color of the entire field using the OnChange feature. But I want to change the color of only the text that is changed or added.

Any help in this matter would be highly appreciated.

Thanls
D_VIPER_01

[AWildman]

I don't think there is a way to do what you want. Its not like you can add a span, div, or p to the input text box AFAIK.

What you could do is have a hidden field with the database value. Make the innerHTML of a div equal that hidden field so that the user can see the data. Have an input box for changes somewhere underneath the div. Once the person is finished entering data, call a js function which compares the input box text to the value in the hidden field. If there are differences, wrap those characters in a span that has a class of something like "redtext". Then write out the whole thing to the div.
I know its kind of klunky.

[d_viper_01]

Thank you AWILDMAN! I was thinking in the same lines, but on the server side..I will try it out and see how it works. Thanks for your help....

[AWildman]

Good luck and if you need any help with the js, lemme know.

[d_viper_01]

Hey AWildMan:

I tried to do what you suggested but I'm having a hard time using javascript and a database source..i'm more of a cold fusion developer...not very good at js...My code works when I just have static text as a string that I compare the values in the input box...But I don't know how to use it with a database field. Also, my code works when I update the words but not when I enter new values...I know this is confusing...Do you think you can spare some time and help me out? I truly appreciate your help.

Thanks
D_Viper_01

[AWildman]

Do you have the html set up the way I mentioned before? I'm assuming that you set the value of the input box to be equal to the value of the hidden field so that people don't have to retype anything. You should not be directly interacting with the database field at any time. You should compare what the user inputs to what is in the hidden input box.

So, on your input box you call a function, probably onblur, which calls a function somefunction(this.value). I'm assuming here that you have class defined in your css called "redtext" which includes at least the following:
.redtext{color: #ff0000;} For the sake of argument, I'm also assuming that the database field includes words separated by spaces.

function somefunction(val)
{
var oldval = document.forms[0].elements[0].value; //this supposes that there is only one form on the page and that the first element in the form is the hidden field

var newhtml = "";
var redopen = "<span class = \"redtext\">";
var redend = "</span>";

if(val!= oldval)//if user has edited data
{
if((oldval.indexOf(val)!= -1))//if user has added data
{
newhtml = redopen + oldval.substring(0, oldval,indexOf(val)) + redend;//enclose added text within span tags that will make the text red when viewed in div
}
}
else//user has modified existing data and perhaps added data
{
var oldvalarray = oldval.split(" ");
var newvalarray = val.split(" ");

var length = oldvalarray.length < newvalarray? oldvalarray.length : newvalarray.length;

for(var i = 0; i < length; i ++)
{
var oldvaltemp = oldvalarray[i];
var newvaltemp = newvalarray[i];

if(oldvaltemp!= newvaltemp)
{newhtml += redopen + newvaltemp + redend + " ";}
else
{newhtml += newvaltemp + " ";}
}
}

document.getElementById("someid").innerHTML = newhtml;
}

Now, a) this code isn't tested, and b) if there is modified data that isn't simply added data, every single word that is different is wrapped in a redtext tag so its not highly efficient. You can mess with the logic some, but the syntax and basic logic is there.

Whew...sorry it took so long but it took a while to write and I had an 1hr long tech support call in between.

[d_viper_01]

Thanks a lor for the code..I will work on it and I'm sure it will work..I appreciate you takin time aside from your busy schedule at work...

[d_viper_01]

Hey AWildman,

Your code made a lot of sense and I am progressing..I also want to be able to save the Red, updated part of the text to my database...If I output the changes to a div, can I save that to a field in my database? Or, can I make the innerHTML of the div equal to the input box so I can save it to the database? I know the text box won't be able to save part of the text as Red, so I don't know if I can even do that...

Thank you again!

[AWildman]

How about adding a line of code at the end of the function that I gave you to set the value of the hidden field to the newhtml var? Add this under the last line in the function:
document.forms[0].elements[0].value = newhtml;

Then I'm sure you can use that value to update your database. I don't know how you're updating your database. That's another story. I'm not real good at that. So, first, get at least this much to work the way you want. I'm fairly certain that getting the hidden value into your database is doable. Then, if you need help with the database portion, you may wish to start a new thread, referencing this one, in another topic appropriate forum.

Good luck! :)