This is the simple page which shows the issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test validate</title>
<script type="text/javascript">
//<![CDATA[
function validate()
{
var t = document.getElementsByTagName("textarea");
for (var i = 0; i < t.length; i++)
{
alert("Text: " + t[i].innerHTML);
}
return false;
}
//]]>
</script>
</head>
<body>
<form method="post" id="a" action="test.htm" onsubmit="return validate();">
<textarea type="text" name="myTextArea" rows="2" cols="20" id="myTextArea">Some text</textarea>
<input type="submit" name="myButton" value="Submit" id="myButton" />
</form>
</body>
</html>
We have a form with textarea and we want to do something with the textarea modified text before the form is submitted to the server. This can be validation, or encryption, as in my case, or anything else.
The script from the example works perfectly fine in IE8. InnerHTML returns the actual up-to-date text, reflecting all the changes user made before pressing "Submit" button. So does InnerText, textContent and $(this).text().
However, what I get in Chrome is always the text as it was when the form was initially loaded. Changes are simply not there. Neither they can be obtained through InnerText, textContent or $(this).text().
Surprisingly, if I use technically non-existing "value" property, I do get the latest changes, as in IE, so in Chrome.
Using "value" property seem to solve the problem, at least for IE8 and Chrome, except I cannot use jQuery selector anymore, because object returned by $(this) does not have this property.
Client encryption, new version:
function encryptElements()
{
var cryptable = getElementsByClassName("cryptable");
var len = cryptable.length;
for (var i = 0; i < len; i++)
{
cryptable[i].value = sjcl.encrypt("password", cryptable[i].value);
}
return true;
}
function decryptElements()
{
$(".cryptable").each(
function (idx)
{
if ($(this).text())
{
$(this).text(sjcl.decrypt("password", $(this).text()));
}
}
);
}
decryptElements();
Now I need to decide where to store the password.
UPD: Thanks to my smarter colleague, I figured out I can use $(this).val() and achieve the result I need.
So now it look like that:
function encryptElements()
{
var key = getKey();
if (!key || !key.length) return;
$(".cryptable").each(
function (idx)
{
if ($(this).val() && !$(this).val().match(/\{iv\:".*",salt\:".*",ct\:".*"\}/))
{
try
{
$(this).val(sjcl.encrypt(key, $(this).val()));
}
catch (e)
{
error("Cannot encrypt: " + e);
return false;
}
}
}
);
return true;
}
No comments:
Post a Comment