Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript altering a string going in to a textbox

    I grab a string with html like junk tags in it e.g. <foo>Hello World!</bar>.

    I use, document.getElementById("foobar").value = thestring

    The text that comes up? <FOO>Hello World!</FOO>...
    (In Firefox its the above but lower case tags, In Opera it is just <FOO>Hello World!)


    Im completely baffled by this and need a way of stopping it doing anything but displaying the string as it has it the line before setting the value. Preferably with an explanation as to why javascript is doing this in the first place.
    Last edited by rcb2603; 07-16-2012 at 01:10 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,914
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by rcb2603 View Post
    I grab a string with html like junk tags in it e.g. <foo>Hello World!</bar>.

    I use, document.getElementById("foobar").value = thestring

    The text that comes up? <FOO>Hello World!</FOO>...
    (In Firefox its the above but lower case tags, In Opera it is just <FOO>Hello World!)


    Im completely baffled by this and need a way of stopping it doing anything but displaying the string as it has it the line before setting the value. Preferably with an explanation as to why javascript is doing this in the first place.
    I don't really understand you. This works fine:-

    Code:
    <input type  = "textbox" id = "foobar" value = "<foo>Hello World!</bar>" >
    
    <script type = "text/javascript">
    
    var thestring = document.getElementById("foobar").value;
    alert (thestring);   //<foo>Hello World!</bar>
    
    </script>
    As does:-

    Code:
    <input type  = "textbox" id = "foobar" size = "40" value = "" >
    
    <script type = "text/javascript">
    
    var thestring = "xyz<foo>Hello World!</bar>xyz";
    document.getElementById("foobar").value = thestring;
    
    </script>

    And where do these "junk tags" come from?


    It is your responsibility to die() if necessary….. - PHP Manual
    Last edited by Philip M; 07-16-2012 at 01:44 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am selecting the html using innerHTML. This appears to be where the problem lies.

    So the HTML has a hidden <span id="description_50"><hello>heffful</wut></span> along with an appropriate text area.

    The javascript does the following
    Code:
    description_html = document.getElementById("description_50").innerHTML;
    document.getElementById("section_description").value = description_html;
    When it gets the innerHTML it seems to try to 'fix' the junk tags.

    My current work around is to get PHP to display it as &lt;hello&gt;heffful&lt;/wut&gt; then the javascript replaces the &lt; and &gt; with < and >. This is quite clumsy though, changing the string back and forth when it neednt be changed at all.




    Ive decided that although Im sure there must be a way of avoiding the double conversion of characters I will stick with that method. Its possible that in plain html even while hidden it will interfere with validation so there is good reason for the change.

    I would still like to know exactly how innerHTML functions though. Ive never seen, nor can I find any mention of its interpretation of the code that it selects. Until now I (and every source Ive used including my O'Reilly books) assumed it simply grabbed or changed whatever was within the tags.
    Last edited by rcb2603; 07-16-2012 at 02:37 PM. Reason: Conceded a change is required.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,914
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    I still do not understand.

    Code:
    <span id="description_50">ABC<hello>itemA</wut><a>itemB</a></span> 
    <br><br>
    <input type = "text"  id = "section_description" size = "40">
    
    <script type = "text/javascript">
    description_html = document.getElementById("description_50").innerHTML; 
    alert (description_html);
    document.getElementById("section_description").value = description_html;
    
    </script>
    For some reason IE converts the tags to upper case. If that is the problem you can convert them back:-
    Code:
    var html = '<HTML><HEAD><BODY>TEST STUFF HERE</BODY></HEAD></HTML>'; 
    var regex = /<([^>]*)>/g; 
    html = html.replace(regex, function(x) { return x.toLowerCase() }); 
    alert(html);
    Appied here:-

    Code:
    <span id="description_50">ABC<hello>itemA</wut><a>itemB</a></span> 
    <br><br>
    <input type = "text"  id = "section_description" size = "40">
    
    <script type = "text/javascript">
    html = document.getElementById("description_50").innerHTML;  
    var regex = /<([^>]*)>/g; 
    html = html.replace(regex, function(x) { return x.toLowerCase() }); 
    document.getElementById("section_description").value = html;
    
    </script>

    I was thown by your assertion - The text that comes up? <FOO>Hello World!</FOO>...
    Nowhere have you mentioned that the issue is that the tags are converted to upper case.
    Last edited by Philip M; 07-16-2012 at 04:02 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It converts them to upper-case in some browsers others it wont.
    It will also alter or remove the closing differing tag to match the start tag. Again depending on the browser.

    None of this behaviour is described in any of the material I have read. Given it is largely unpredictable depending on the browser Ive decided its easier to do the basic conversions using PHPs htmlspecialchar and a replace in the javascript. (Which solves another minor issue so its effective enough.)


    The only issue that really remained for me was what exactly does innerHTML do.
    I have made some headway with that. There are plans to standardise the parsing it does but at the moment its unpredictable behaviour is not only difficult to handle it poses some serious risks. textContent basically solves all of the problems but is not supported by IE8 and below. (Which we continue to support.) So Ill stick with ensuring the content has no html code in whatsoever until earlier IE support is dropped.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •