Single quote confusion in javascript generated HTML

[Al Henderson]

Morning All,

I am wrestling with some table HTML generated on the fly by javascript
which is then submitted via POST variables and stored in a database.
The code below demonstrates my confusion, and I was hoping someone
could explain it for me.

I have the following javascript to add data to a table via the DOM:

var g_szText = 'Al\'s confused';
var oTblBdy =
document.getElementById("tblTest").getElementsByTagName("tbody")
[0];
if(oTblBdy)
{
var oTR = document.createElement("TR");
if(oTR)
{
var oTD = document.createElement("TD");
var szHTML = "<INPUT TYPE=hidden NAME=hiddentext
ID=hiddentext VALUE='"+g_szText+"'>";
oTD.innerHTML = szHTML;
oTR.appendChild(oTD);
oTblBdy.appendChild(oTR);
}
}

Note the single quote in g_szText. Now, with this as it stands, if I
alert on the value of the hiddentext element it says 'Al', which i can
understand due to the single quote terminating the string. However,
if after setting up the table, I do this:

var oHidden = document.getElementById("hiddentext");
if(oHidden)
{
alert("Hidden text at end of on load: '"+oHidden.value+"'");
oHidden.value = g_szText;
alert("Hidden text after reload: '"+oHidden.value+"'");
}

The second alert here says 'Al's Confused'. And when I submit my
form, the post variable comes back complete, and not truncated. Can
someone explain to me why directly setting the variable value has
different results to setting up the innerHTML of the TD object?

I don't really want to have to reset each of my hidden variables like
that. The problem does not occur if my value goes into a textarea or
a text input box..

Can anyone put me out of my misery?

Thanks,
Al.

 

[Al Henderson]

I don't really want to have to reset each of my hidden variables like
that. The problem does not occur if my value goes into a textarea or
a text input box..

To correct myself, textareas do work, but that is presumably because
the HTML for them does not use VALUE='xxx' put just put the text
between the <TEXTAREA> </TEXTAREA> tags. My text boxes work, but only
because my utility code replaces single quotes with their HTML
equivalent ($#39). So, to solve my problem, I have done the same
replace on the string I put in the value of my hidden variable.

Can anyone enlighten me as to why explicitly setting the value of the
DOM element via javascript does not require me to encode quotes in the
same way?

Thanks,
Al.

 

[Al Henderson]

Al Henderson said the following on 1/23/2008 5:14 AM:
I am curious why you are using DOM methods to create the table but then
you use innerHTML to insert the inputs. Create them dynamically as well.
What happens with innerHTML is a toss up since browsers can implement it
any way they want to.

Randy,

Thanks very much for your reply. The code used to generate HTML via
PHP, hence setting up the strings in the way I do. I have been
converting the code to use DOM methods to get a more slick feel to my
pages (I can add rows dynamically etc, and previously had to submit
the page to PHP to get it to write more HTML for me - yuck). My
laziness (and unfamiliarity with the DOM methods, to be honest) led me
to not go the whole way. I'd like to convert the whole thing to DOM
methods, time might well beat me, though :-(

Al.

 

[Al Henderson]

Al Henderson said the following on 1/23/2008 6:33 AM:




var newInput = document.createElement('input');
newInput.type = 'hidden';
newInput.value = 'something';
TRElementReference.appendChild(newInput);

That will get you started.

You use createElement to create the element, then set the properties you
want set, then you appendChild it an element in the page. In your case,
it would be the TD element you want it in.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

Thanks very much for all your help, Randy. Much appreciated