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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    How to Reset HTML Form drop down list on Page Reload

    Hi,

    I've almost got a table swap out feature on my page working (thanks to Old Pedant) but there is one thing that is eluding me. (Page is at http://www.the-house-plans-guide.com...spancalculator)

    If you refresh (reload) the page, the previously stored value of the drop down list is still shown but the default table (which is set to be visible) is displayed. This could result in the wrong table being shown for what is displayed in the drop down.

    Could I add an addEventListener("load"...) to somehow reset the dropdown value anytime the page is reloaded? How would I implement this?

    I would also need to reset the dropdown value if the user used their browser back (or forward) arrow and then returned to the page as the table is reset in this instance too.

    Sorry I know this is probably very basic but I'm just figuring out Javascript after not doing any programming since the days of Pascal (the language not the person!).

    Thanks.

    Susan
    Last edited by Maguire; 06-28-2012 at 04:18 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,585
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Oh, that's easy. And I would assume you'd like to reset the 4 forms to blank as well?
    If so, it would be better if you'd give each of your <form>s a unique name or id.

    I'll assume you gave them unique ids (preferable over names) of "joistForm1", "joistForm2", etc.

    So:
    Code:
    <script type="text/javascript">
    document.getElementById("species").onchange = 
        function() {
            var opts = this.options;
            for ( var i = 0; i < opts.length; ++i )
            {
                var tblID = opts[i].value;
                document.getElementById(tblID).style.display = ( opts[i].selected ? "block" : "none" );
            }
        };
    // reset the species choice:
    document.getElementById("species").selectedIndex = 0;
    
    // reset all 4 forms:
    for ( var fnum = 1; fnum <= 4; ++fnum )
    {
        document.getElementById("joistForm" + fnum).reset();
    }
    </script>
    Untested, but I think it should work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Maguire (06-28-2012)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you , thank you! It works like a charm.

    I had used unique names for the forms, not ids. I'll have to do some reading to understand the difference between how they are used.

    Susan

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,585
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Names for <form>s have been deprecated for some time now. SO it's better to use ids.

    But you *can* use names (and probably will be able to for years to come).

    To get a form (or anything) by ID, you use document.getElementById("...id of element...")

    To get a form by name, you can simply do document.formName

    You can also do document.forms["...formname..."] but I have never seen a reason to do that. If you are going to do that, use an ID instead.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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