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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    Internet Explorer Input type="text" values being cleared in ALL versions of IE

    I've got an interesting case here which has left me quite puzzled. I've been debugging IE crap for years, however this one has truly left me confused and awestruck by the sheer retardedness of IE.

    The issue is that <input> tags with a set value are not displaying at all on the page when you view it in IE. Here is a dumbed down version of the form being called into place [this is from the source code after CF hits it].

    The weird thing is that you can actually see the values of the inputs when you swap between IE8 and IE7 compatibility mode for a brief second before the fields are cleared. They aren't just "being hidden" or "not showing" they are populating- then being cleared out.

    Before you ask: there is no CSS being called that either hides nor changes text color on this page. There is no JS erros on page and nothing that clears fields on load. I have a valid doctype for all browsers using Paul Irish, yada yada yada.
    edit: I unfortunately cannot link you to the live site since this is only happening inside of a user's profile display page- which means you'd have to create an account, fill it out and then log in to view this issue.

    Code:
    <form action="/agent-profile-display/?id=1216" method="post" name="form1">
          <label for="fname">First Name:</label>
          <input type="text" name="fname" value="Rich">
    </form>
    The value is still there in IE, however after the page loads it doesn't display it- when you click into the field it acts as if it is a blank field despite still having a value of "Rich" attached to it.
    Any ideas on what could possibly be happening to cause this clearing issue?
    Last edited by dylanbaumannn; 08-27-2012 at 04:43 PM. Reason: clarifying

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You haven't closed the form tag fully </form> and forms no longer have a 'name' attribute. IE is less tolerant of errors.

    And, of course, you have a proper DOCTYPE declaration?

    Form inputs, etc., should not occur directly within a form tag. They need to be enclosed in a block level element: fieldset, table or div.
    Last edited by AndrewGSW; 08-27-2012 at 04:41 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by AndrewGSW View Post
    You haven't closed the form tag fully </form> and forms no longer have a 'name' attribute. IE is less tolerant of errors.


    And, of course, you have a proper DOCTYPE declaration?

    Form inputs, etc., should not occur directly within a form tag. They need to be enclosed in a block level element: fieldset, table or div.
    That form closed was on my end when typing it over, it's correct on the live site. I've updated the post to show the correct code

    You are incorrect on your form information- forms still have a name attribute and do NOT need to be enclosed in a block level element in order to display correctly see this example from W3C.

    Also, doctype is discussed in the 3rd paragraph under the "before you ask".
    Last edited by dylanbaumannn; 08-27-2012 at 04:58 PM.

  • #4
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by dylanbaumannn View Post
    That form close was on my end when typing it over, it's correct on the live site. I've updated the post to show the correct code

    You are incorrect on your form information- forms still have a name attribute and do NOT need to be enclosed in a block level element in order to display correctly see this example from W3C.

    Also, doctype is discussed in the 3rd paragraph under the "before you ask".

    Also, before someone else asks- I realize that in IE the 'name' and 'id' are both merged and treated as an ID and should be kept unique throughout the page. All names and ID's have been kept unique throughout the entire page.
    Last edited by dylanbaumannn; 08-27-2012 at 04:58 PM.

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The link you provided is to w3schools which is not the same as w3c. The name attribute for forms is maintained for backwards compatibility.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by AndrewGSW View Post
    The link you provided is to w3schools which is not the same as w3c. The name attribute for forms is maintained for backwards compatibility.

    after wrapping all form elements in <div> tags and removing the name attribute i'm still getting the result of:

    • First it loads the page and populates the form fields with the correct data
    • It then dumps the values out and the forms now appear to be empty
    • It loads all JS/CSS includes



    since it's dumping before the JS/CSS hits the page I'm wondering what's causing this.
    Last edited by dylanbaumannn; 08-27-2012 at 07:24 PM.

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Label's for="" refer to element ids, not names, but I do not know if this would cause your page to fail in IE - I'm just eliminating possible causes.

    BTW

    after wrapping all form elements in <div> tags
    .. I hope you didn't wrap every single control in a div(?). The controls could have been placed in a single fieldset or div.

    You might need to post some more code before we can discover the cause of your current issue.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,723
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by dylanbaumannn View Post
    Before you ask: there is no CSS being called that either hides nor changes text color on this page. There is no JS erros on page and nothing that clears fields on load.
    So have you tried adding some CSS to change it to something outrageous such as red or purple and seeing if it comes up? IDK if it will work or not.... I remember once I forgot to change all of my input border's to be 1px solid black, and when I added my top chunk of *{border:none; ... } I couldn't figure out why all of my input's disappeared before realizing I made them all invisible... What I'm driving at is maybe the input text color is set to white as well as the background?

    Also what type of page is this? is it a .net page (assuming)? you have this
    form action="/agent-profile-display/?id=1216" method="post" name="form1"
    is that the page you are on (again assuming)? Sometimes your Page_Load Event could show something, but then if it calls another page's Page_Load event, that page's Page_Load event would clear what the prior Page_Load event did... does that make sense?

    Elaboration...
    PageA_Load(){
    calls PageB ?
    PageB_Load(){
    Fills in all the text boxes with appropriate data...
    end load()
    }
    ... back to PageA ...
    initialize all inputs (@ thus remove all the work PageB just did)
    end load()
    }

    Although all of that is unlikely if it is only happening in IE- but I wouldn't rule it out o.O

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #9
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by alykins View Post
    So have you tried adding some CSS to change it to something outrageous such as red or purple and seeing if it comes up? IDK if it will work or not.... I remember once I forgot to change all of my input border's to be 1px solid black, and when I added my top chunk of *{border:none; ... } I couldn't figure out why all of my input's disappeared before realizing I made them all invisible... What I'm driving at is maybe the input text color is set to white as well as the background?

    Also what type of page is this? is it a .net page (assuming)? you have this


    is that the page you are on (again assuming)? Sometimes your Page_Load Event could show something, but then if it calls another page's Page_Load event, that page's Page_Load event would clear what the prior Page_Load event did... does that make sense?
    Elaboration...
    PageA_Load(){
    calls PageB ?
    PageB_Load(){
    Fills in all the text boxes with appropriate data...
    end load()
    }
    ... back to PageA ...
    initialize all inputs (@ thus remove all the work PageB just did)
    end load()
    }

    Although all of that is unlikely if it is only happening in IE- but I wouldn't rule it out o.O
    Unfortunately the color option won't work since it's litterally not showing any value. It's not just displaying in a transparent/similar color, it's just not populating to the fields. [well it is, but then it clears them].

    also it's a Coldfusion page

  • #10
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,723
    Thanks
    41
    Thanked 191 Times in 190 Posts
    hmmm... Have no clue when it comes to CF
    Personally, the next thing I would try is disabling scripting and try it- see what happens. If that gives you nothing, then I would try re-constructing the page piece by piece until you see what is breaking it- omit frivolous things- just rebuild the overall structure. Keep out even CSS and Javascript completely. If you have any AJAX hold off on it- at this point it doesn't matter if things look sloppy and unstructured, you just need the elements named accordingly.

    When you have the basic skeleton constructed see if your form loads as intended. If it does not, then you know that without a doubt your problem is in the server side code, not anything client side.

    Now, if it does load correctly, first slowly add in your CSS (remember to keep clearing your cache every time you make changes so you see the most up-to-date changes). Add the CSS in chunks so you know what you added back each time. If at any time it stops working, then you know exactly what chunk of CSS caused the problem, and you can follow the same steps to find what line of CSS is the culprit. If that works ok, then I would move on to Javascript. Follow the same methodology, one little piece at a time. The same methods of deductive reasoning will find the problem (if it exists in the JS). Next I would add in JQuery. After all of that you would know that it is either one of the above, or none; and so Finally I would start (again keeping to same tactics) adding in AJAX (if you are using any).

    These steps will/should eliminate the culprit fast. Now if/when you find the culprit, you don't know how to fix it, then by all means post back questions.

    If when you rebuild it, nothing (magically) breaks along the way (and thus identifying the problem code), then I would do a file comparison and see if everything truly is identical. If everything is identical, and there was no 'problem' in rebuilding it, then I would venture to say that it is a browser setting gone rogue.

    These are simple HTML debugging techniques, and while they may seem tedious, remember a lot of what you're doing is copy/paste/browse/clear/repeat... it sucks, but debugging is a necessity when you are coding. Just because everything validates and there are no errors does not mean there are no errors. Code can overwrite code, and it can be completely valid- if it is written correctly the machine will execute it as intended- a machine can't know what you intended. I suspect your problem is either in the server side code or the javascript.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Tags for this Thread

    Posting Permissions

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