Single quote confusion in javascript generated HTML

Discussion in 'Javascript' started by Al Henderson, Jan 23, 2008.

  1. Al Henderson

    Al Henderson Guest

    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, Jan 23, 2008
    #1
    1. Advertising

  2. Al Henderson

    Al Henderson Guest

    On 23 Jan, 10:14, Al Henderson <> wrote:

    > 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, Jan 23, 2008
    #2
    1. Advertising

  3. Al Henderson

    Al Henderson Guest

    On 23 Jan, 10:44, Randy Webb <> wrote:
    > 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, Jan 23, 2008
    #3
  4. Al Henderson

    Al Henderson Guest

    On 23 Jan, 12:03, Randy Webb <> wrote:
    > Al Henderson said the following on 1/23/2008 6:33 AM:
    >
    >
    >
    > > On 23 Jan, 10:44, Randy Webb <> wrote:
    > >> 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 :-(

    >
    > 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 :)
    Al Henderson, Jan 23, 2008
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    3
    Views:
    13,134
  2. Eric Layman
    Replies:
    3
    Views:
    611
    Rad [Visual C# MVP]
    Apr 14, 2007
  3. Evan
    Replies:
    1
    Views:
    380
    Marc 'BlackJack' Rintsch
    Nov 4, 2008
  4. Evan
    Replies:
    3
    Views:
    505
    Marc 'BlackJack' Rintsch
    Nov 4, 2008
  5. vikrant
    Replies:
    8
    Views:
    340
    vikrant
    May 17, 2007
Loading...

Share This Page