www.webdeveloper.com
Results 1 to 5 of 5

Thread: Javascript Show/Hide onload and onchange

Hybrid View

  1. #1
    Join Date
    Jun 2009
    Posts
    3

    Arrow Javascript Show/Hide onload and onchange

    I have some javascript set up to hide a part of a form (Question 2) depending on the response to another part of the form (Question 1).

    This works fine on an 'Add record' page - the script is called using 'onchange' on Response 1.

    However, I also want this behaviour on an Update page, which displays a user's current responses. I want the script to be called onchange and also onload (in fact, once the page and the current responses have loaded). As it stands at present, if the current response is such that Question 2 should not be hidden, the only way to make Question 2 appear is to change the response then change it back again, since the script is only called 'onchange'

    My CSS file contains this:

    #govpdf {
    display: none;
    }

    I have this in the head:

    <script type="text/javascript">
    function check(Question1) {
    if (document.getElementById) {
    var style_govpdf = document.getElementById("govpdf_form").style;
    }
    if (Question1 == "Yes") {
    style_govpdf.display = "block";
    }
    else {
    style_govpdf.display = "none";
    }
    }
    </script>

    And this is the relevant code in the body (I've simplified the questions for clarity!):

    <form action="somepage" method="POST">
    <div>
    Question 1: Do you have a pet?
    <select name="Question1" size="2" onchange="check(this.value)">
    <option value="Yes" Selected></option>
    <option value="No"></option>
    </select>
    </div>
    <div id="govpdf">
    Question 2: Is your pet a dog?
    <select name="Question2" size="2" onchange="check(this.value)">
    <option value="Yes" Selected></option>
    <option value="No"></option>
    </select>
    </form>

    I have already tried using <body onload="check();"> and putting <script>window.onload=check();</script> at the bottom of the page but neither work. I am no expert in javascript, I was hoping someone would know what I should do, having searched around I can find lots of help for doing what already works above (for a 'New Record' sort of page) but nothing about an 'Update Record' page.

    Many thanks in advance.

  2. #2
    Join Date
    Oct 2006
    Posts
    93
    <body onload="check();"> should work, but you are not passing anything to the function.
    You need a more generic function to check the skip pattern on the page, something like....<body onload="checkOnLoad();">, which would then process the entire form for skip patterns.

    Now, is it safe to say that there are more skip patterns on the page that just what you put above or is that it?

  3. #3
    Join Date
    Jun 2009
    Posts
    3
    Thanks for your help. There is only one skip pattern, the page is actually used to define site settings; basically at present it only has three Yes/No questions and if the answer to question 2 is No then question 3 is irrelevant.

    Like I said I don't normally write javascript but I've had a go, and no luck yet.. I have written this:

    <script type="text/javascript">
    function loadcheck(Gov_allow) {
    if (Question1=="Yes") {
    document.getElementById("govpdf").style.display="block";
    }
    else {
    document.getElementById("govpdf").style.display="none";
    }
    }
    </script>

    and put <body onload="loadcheck();">

    Should I put something between the parentheses?

    Thanks again!

  4. #4
    Join Date
    Oct 2006
    Posts
    93
    If that's the case then I guess you can just hardcode it.
    Give the select element an id like....
    <select id="Q2" name="Question2" size="2" onchange="check(this.value)">

    <body onload="check(document.getElementById('Q2').value);">

  5. #5
    Join Date
    Jun 2009
    Posts
    3
    Great I think I've got it working now.

    Thank you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles