SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation strange call behavior?

    I'm a JS novice and SitePoint has been very useful in my self-education. I'm hoping to get more specific advice by joining the forum, and maybe one day will have advice to give.

    I've built a simple web form for my site and used a JS function to clear each field's initial value onfocus (and restore onblur):

    function resetFields(whichform) {
    for (var i=0; i<whichform.elements.length; i++) {
    var element = whichform.elements[i];
    if (element.type == "submit") continue;
    if (!element.defaultValue) continue;
    element.onfocus = function() {
    if (this.value == this.defaultValue) {
    this.value = "";
    }
    }
    element.onblur = function() {
    if (this.value == "") {
    this.value = this.defaultValue;
    }
    }
    }
    }

    window.onload = prepareForms;
    function prepareForms() {
    for (var i=0; i<document.forms.length; i++) {
    var thisform = document.forms[i];
    resetFields(thisform);
    }
    }

    I built the form in its own html document and tested this in most browsers; it works well. But when I add it to my site, where the form is in an initially hidden layer, the script doesn't work. I assumed that the call function had broken down for some reason and so tried removing the window.onload call and assigned an MM_callJS function to the form itself onfocus... no luck.

    I'm aware that there may be some issue with the hidden form not being recognized by the resetFields function, but I really don't know where to go from here.

    And I have to say that I really don't see why the script isn't running in all forms on the page hidden or visible.

    Any enlightenment is GREATLY appreciated.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by tawhite View Post
    I built the form in its own html document and tested this in most browsers; it works well. But when I add it to my site, where the form is in an initially hidden layer, the script doesn't work.
    Let's get testing.

    Here is an initially hidden layer:

    Code html4strict:
    <p><a id="toggle" href="#hidden">Toggle hidden layer</a></p>
    <div id="hidden">
        <form>
            <p><label>Name: <input name="name" value="Name"></label></p>
            <p><label>Email: <input name="email" value="Email"></label></p>
        </form>
    </div>

    And here is a script at the end of the body, that sets up the toggle layer, and hides it before the page is loaded.

    Code javascript:
     
    (function () {
        var toggle = document.getElementById('toggle');
        toggle.onclick = function toggle () {
            var id, el;
            id = this.href.split('#')[1];
            el = document.getElementById(id);
            if (el.style.display === 'none') {
                el.style.display = '';
            } else {
                el.style.display = 'none';
            }
        };
        toggle.onclick(); // hide it before the page is loaded
    })();

    Your code works perfectly fine on this test page, so now we need to look at your test page to find out what there is on there that is conflicting with how it's expected to work.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I started with your code, Paul, and changed / added elements until I had built the exact form I'm having trouble with, testing it with every change... It turns out that issue is a conflict with another function that I use to debug the Safari browser's 'back' button.

    window.onload = P7_fixSafariBB;
    function P7_fixSafariBB(){ //v1.1 by PVII
    if(navigator.userAgent.indexOf("Safari")>-1){
    var jj=onload;if(jj){if(onunload==null){
    document.body.setAttribute('onunload',jj);}}}
    }

    I thought that this might simply preventing the prepareForms function because they are both called by window.onload, so I tried calling P7_fixSafariBB with <body onload=...>, but prepareForms was still negated.

    Could there be a conflict in the actual functions that I'm not seeing?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by tawhite View Post
    I started with your code, Paul, and changed / added elements until I had built the exact form I'm having trouble with, testing it with every change
    Good job, that's perhaps the best way of testing.

    The problem is that window.onload occurs only once. If a script changes it, the old setting is destroyed.

    You may find it better to not use window.onload and to use one of the cross-browser techniques to attach events instead. Or perhaps even better, you can move the script to the bottom of the body, just before the </body> tag, so that you can successfully run the script before even the onload event takes place.

    Code html4strict:
    <body>
        ...
        <script type="text/javascript" src="js/script.js"></script>
    </body>

    That's also one of the best practices for speeding up your web site.

    So all you'd need there is:

    Code javascript:
    P7_fixSafariBB();
    prepareForms();

    But there's no reason at all why you shouldn't put all of your scripts at the bottom.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mr. Wilkins, you are a gentleman and a savior. Everything is running smoothly now and I appreciate knowing that I can call functions from the bottom of the page; it never occurred to me to organize that way but I'm already seeing improvements.

    Sincere thanks.


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
  •