SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Go to Anchor after Form Submit not working IE

    Forgive me if I don't do this right - my first time posting (almost anywhere!).

    I am building a site (xhtml and css) with five php pages with booking/mailing forms in php (using PEAR smtp). They work very nicely in recent versions of Firefox, Chrome and Safari. They post to the same page and on clicking Submit they display/don't display the form as appropriate, and return to the anchor point I have set, eg action="telephone-counseling.php#cont"

    They work nicely in IE (7 and 8) except for one important thing - the larger forms in the left columns of the pages do not return to the anchors correctly (eg http://www.therapyandspirituality.co...counseling.php and www.therapyandspirituality.com/bookings.php) but the forms do behave when placed in the smaller right hand column (eg http://www.therapyandspirituality.co...ns-answers.php and http://www.therapyandspirituality.co...lunteering.php)

    They all use the same code - though there is extra code on the bookings page - and I have tried a version with most extraneous stuff stripped out (like cufon etc, www.therapyandspirituality.com/bookings2.php) and they still don't return correctly. I have validated, tested all anchors (set by an id in an h2 tag) and searched for many, many hours and not found a solution.

    Can anyone help please?

    I would be very grateful!

    Thanks

    Peter

  2. #2
    SitePoint Zealot Klav's Avatar
    Join Date
    Mar 2002
    Location
    Huddersfield, UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried adding <a name="cont"></a> right before the <h2 id="cont">? This will work better in older browsers. So it'd look like <a name="cont"></a><h2 id="cont">Text here</h2>, for example.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Klav View Post
    Have you tried adding <a name="cont"></a> right before the <h2 id="cont">? This will work better in older browsers. So it'd look like <a name="cont"></a><h2 id="cont">Text here</h2>, for example.
    The quoted was accurate when HTML 3 was being used. These days, there is now no valid purpose to use the name attribute for anything other than to name form elements.

    Back to the problem at hand, why the page isn't scrolling.

    When I submit the form and the fragment identifier is set to #cont, the page does scroll to the correct location. You can see that happening when the screen-size of the page is around 300 pixels high.

    When the screen is larger, such-as at a full-screen view, the "cont" section is low down on the page, so the page scrolls all the way to the bottom.

    It is not possible for the web page to scroll down any further than the bottom of the page. Not even if you want to scroll the "cont" section to the top of the screen. You will need to either add empty blank lines to the end of the page for that to occur, or to restructure the page so that the message appears further up the page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to both of you. Yes, I had tried various combinations of anchor tags, including the one you suggested, Klav, but to no avail.

    And, yes, pmw57, you are right. The contact form itself on the Contact-Us page isn't a good example for the very reason you state. However, the same form at the bottom of the telephone-counseling.php page doesn't behave correctly. It doesn't bring the Contact Form to the top of the page on error on IE7 (the contact-us form actually does), nor does it do so when filled in. Similarly, the bookings form doesn't either.

    I have been told by someone else that this IS working ok on IE8 - I confess I had been relying on my client to tell me it wasn't working in IE8 and he may be mistaken about his version of IE, or have it working in IE7 mode. I have attached the code for bookings2.php, which has the cufon stuff stripped out.

    Any further ideas? I have spent over 10 hours googling and reading every thing I could find and nothing has helped!

    [EDIT: attachment file bookings2-php.txt contained sensitive info. Please see below for edited version of the file. - Mittineague]
    Last edited by Mittineague; Mar 31, 2010 at 01:14. Reason: explaining attachment decision

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Peter Murray View Post
    However, the same form at the bottom of the telephone-counseling.php page doesn't behave correctly. It doesn't bring the Contact Form to the top of the page on error on IE7 (the contact-us form actually does), nor does it do so when filled in. Similarly, the bookings form doesn't either.[/url]

    I would like to be able to experience the lack of this working, because for me it works in IE6, IE7 and IE8 with no troubles.
    Quote Originally Posted by Peter Murray View Post
    I have been told by someone else that this IS working ok on IE8 - I confess I had been relying on my client to tell me it wasn't working in IE8 and he may be mistaken about his version of IE, or have it working in IE7 mode. I have attached the code for bookings2.php, which has the cufon stuff stripped out.

    Any further ideas? I have spent over 10 hours googling and reading every thing I could find and nothing has helped!
    First find a way to experience the problem for yourself. Only when the problem can be duplicated can you take steps to fix it, and know that it's fixed when those same steps fail to demonstrate the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Point taken, I think! But I have experienced the IE7 problem for myself and do continue to experience it and duplicate it!??

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    IETester does complain about line 708 requiring a jScript object, this line from sizzle.js

    Code javascript:
                Array.prototype.push.apply( ret, array );

    but I think that this is unrelated. It's not causing any issue when using the actual web browser.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul, for testing that. I can confirm that without the sizzle.js (which I need for cufon) and without any of the cufon, the problem continues to occur, so you are right to guess it has nothing to do with it.

    I see you used the telephone counseling form. I have just used it again on both IE7 and FF3.6 and the latter behaves perfectly and IE7 behaves badly: FF brings the Contact Form heading to the top of the page on error (because there's enough below the heading to fill to the bottom of the page) and IE7 doesn't - and then on submit FF gives me my page right to the bottom, including the confirmation message, but IE7 only shows me the Contact Form heading and doesn't take me low enough on the page to show the confirmation message

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Peter Murray View Post
    Point taken, I think! But I have experienced the IE7 problem for myself and do continue to experience it and duplicate it!??
    Then we need to come up with consistent ways to create the problem.

    For example:

    1. Open http://www.therapyandspirituality.com/bookings.php
    2. Click form button called "Send your booking"
    3. "Booking Form" is a couple of paragraphs below the top of the screen.

    "Booking Form" should instead be at the top of the screen.

    It could be a problem where proxy servers are used, that can cause it to fail in certain ways, for which there is sadly no solution.

    http://www.greywyvern.com/?post=217

    The only way to know for sure is to gather enough data-points so that you can figure out what the issue actually is.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. Did what you said and the page begins with the H1 heading "How to Book Workshops, Courses & Retreats" not with the "Contact Form".

    In FF, Safari and Chrome the "Contact Form" heading does appear at the top of the page (plus the padding I set for it).

    Thanks for the post re proxy servers - but he refers only to IE6 and says IE7 works fine with the urls with hash anchors, doesn't he?

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Peter Murray View Post
    Thanks for the post re proxy servers - but he refers only to IE6 and says IE7 works fine with the urls with hash anchors, doesn't he?
    Yes it does, which means looking for other strange and obscure reasons, or testing the problem with different versions of the page. Is server-side cod necessary to duplicate the problem? Can the problem still be experienced without the scripting disabled, or taken out? Is the problem still there when there is no CSS, or only parts of it.

    Test different variations, and remove as much as you can from the page. This way you'll notice that then you remove Foo the problem goes away, and can then investigate more closely into Foo
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, very helpful advice. Have done some of this - the problem occurs with or without cufon-scripting - that's for sure. I will test with and without CSS and see. And try some other variants. I appreciate the time and attention you are giving this.

  13. #13
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, first of all, thank you for making me go through disciplined steps! It's been an object lesson.

    I worked my way through the full list, removing things. When I finally got down to a non-css and non-php simple html file - with all java and php code stripped out - I found in IE7 that after having more than 6 input tags in my first fieldset the anchor didn't work on post, but did if I stripped out all but 6 input tags and stripped out the other fieldset with the select with 10 options. I could leave in my third fieldset (containing 5 inputs and a textarea).

    If I removed an input field from the last fieldset and put it in the first fieldset, things started not to work properly again, so it does seem to be some weird limit that IE7 can't handle - on this form. I did have divs surrounding the input tags but removing them or adding them back doesn't change anything about the behaviour.

    However, this is a simple postback. When I apply these changes to the full php-css version I find that on clicking submit without filling in anything the form with error messsage comes up in exactly the right place at the anchor - and as soon as I add in extra input tags it doesn't. So something identified there.

    BUT when I fill in an post the form and all works well, it still doesn't go correctly to the anchor tag.

    AND, it doesn't explain at all why the telephone-counseling.php form, with 5 input fields and one textarea doesn't go to its correct anchor position either on error or on successful send.

    Oh dear!!

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    If it's any help, here's a post which indicates that it's speed of the page being loaded that may be responsible, with some hints that an onload event to trigger the scrolling might help.

    IE7 - Problem linking to URL with anchor tag

    They seem to be ugly solutions though, so am looking elsewhere for something more elegant before I consider them.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Another possibility is due to empty anchor tags http://www.tkjune.com/2009/02/23/fix...working-in-ie/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Paul. Yes, something to do with page loading seems to be the only way to go! I did actually find the post you showed me - and tried his method (just putting in the <body onload="goToAnchor();">) but it didn't work for me.

    I had started to play around with javascript - but hardly know any and don't like using it unless I have to - but will if I have to, of course.

    I haven't used an anchor tag, I have used id="bookfm" in my H2 tag. And I am aware of the empty anchor tag problem in IE. I tried using a (filled) anchor tag itself instead of my H2, and tried surrounding my H2 with an anchor tag too, all properly set up, but none of that worked.

    It is very kind of you to persevere with this and I really appreciate it. An "elegant" solution would be lovely, but I will settle for an inelegant one! I had assumed that unless I could find anything else I would have to go with some perhaps clumsy javascript? If it works and complies, fine. I am just about to re-attach a txt file of my bookings2.php file - with more private stuff removed - but will have to wait for it to be moderated

  17. #17
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just uploaded a txt of the bookings2.php page
    Attached Files Attached Files

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    I might have a clue. Earlier I noticed that after submitting, IE would show the page, and then it would scroll down by several lines.

    I suspect that it's due to the image loading up in the header, and IE not knowing how much room to allow for the image. When the image loads, IE reflows the page, but not the target location.

    Possible solution: ensure that the images have their height set. And for the sake of completion, their width.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good thinking - I noticed that too (IE showing the page and then scrolling down) and wondered about it. BUT, apart from background images on the bookings page, I only have the photo of Richard, and some images as spacers in the main links bar. But each image has its width and height set (something I am usually very careful about and have checked).

    However, if you go to wwoofing-volunteering.php and fill in the form in the right column there you will notice that the page does NOT move and stays in place and goes correctly to the anchor point. However, if I move the very same form on that page into the main body (left col) then it starts to misbehave.

    I had been racking my brains about it but couldn't see anything in the css or setup that suggested anything...??

  20. #20
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have just taken out the whole top section on a bookings test page - so that the h1 is the first thing on the page - but still not joy - not working!

  21. #21
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is to tell you, Paul, that I have resolved my problem and to thank you for:

    1.The time you spent helping me
    2.The way you pushed me to trouble-shoot systematically - I learned something important from that.
    3.The tip you gave me about the ie problem with sizzle.js. It wasn't part of this problem but I found that it stopped IE8 rendering cufón - IE7 was fine.

    I didn't in fact pinpoint the IE return to anchor from form problem but I found IE performed better when I put the right-float right column ahead of the left-float left column in the markup, and moved the php processing code before the doc declaration.

    BUT that didn't fully resolve the issue. So, I have put a goToAnchor script in the head, a $fmposting variable at the end of my php processing code, and a php conditional onload statement in the body tag. That now works very nicely, and if javascript is disabled, the return to anchor still works very well in the other browsers and at least not as badly in IE.

    Here's the stuff, in case it's useful to anyone else, and in case you might see a way of improving it!

    Script in Head:
    <script type="text/javascript">
    function goToAnchor() {
    window.location.hash="#contactfm";
    }
    </script>

    Conditional code in Body Tag:
    <body id="top" <?php if ($fmposted==true) {echo 'onload="goToAnchor()";';} ?> >

    And, of course, $fmposted is set right to true at the end of my php posting code above the doc declaration, regardless of whether the message was sent or there was an error.

    With best wishes,

    Peter

  22. #22
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,454
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    Well, I'm glad you got it sorted by the time I got a chance to look at the attached file. The only thing I could see that might be doing it is
    HTML Code:
    <a name="bookfm"></a>
    <h2 id="bookfm">Booking Form</h2>
    where one browser might go to the anchor and another might go to the heading. But that shouldn't make that much of a noticeable difference.

  23. #23
    SitePoint Member
    Join Date
    May 2008
    Location
    South of Spain
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! Yes, actually the "<a name" tag shouldn't have been in there in the file I put up - I forgot to take it out. It was something I did at someone's suggestion and then removed when I found (of course) that it didn't help. My file only had the id in the h2 tag - which should have worked, and did work in all the browsers I tested except IE 7 and IE 8.

    Incidentally, I have been finding that IE 8 isn't as standards-compliant as I thought it would be and still has some formatting quirks - such that I have had to provide a conditional IE 8 css file!

    Many thanks for your interest


Bookmarks

Posting Permissions

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