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 15 of 15
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    window.onload question

    I have the following javascript

    Code:
    	<script language="javascript">
    		    function toggleRows(select, rows) {
        var display = select.selectedIndex == 1 ? '' : 'none';
        for(var i=0; i < rows.length; i++) {
        document.getElementById(rows[i]).style.display = display;
        }
        }
        window.onload=toggleRows();
    	</script>
    Which is called in various locations on the page like below

    Code:
    <tr class="ocusdallergy"> 
    			<td class="bold">ALLERGIES:</td><td id="HRI_Allergies">~([01]HRI_Allergies)</td><td class="gwCen"></td>
    			<td><select name="eReg|HRI_Allergies" id="eReg|HRI_Allergies" onchange="JavaScript: toggleRows(this, ['allergy1', 'allergy2', 'allergy3', 'allergy4']);">
    					<option value="">Select...</option><option value="Y">Yes</option><option value="N">No</option>
    </tr>
    However when a user loads a page after choosing yes the rows do not display.. So I attempted to add window.onload as you see above however it does not display the rows on load if the value is yes only if a user selects another value and selects yes again.

    Is it possible to have these rows expanded on load if the dropdown value is yes prior to a refresh/reload of the page?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Yes, simply set the option "Yes" to selected.

    <option value="Y" selected>

    Or another possibility

    Code:
    function toggleRows(select, rows) {
    var si = select.selectedIndex;
    if (si == 0) {si = 1}
    var display = si == 1 ? '' : 'none';
    Quizmaster: In Roman Catholicism, baptism, confirmation and matrimony are three of the seven what?
    Contestant: Deadly sins.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I think I worded my question wrong maybe. Or i am not understanding your response

    The function itself works fine when a user selects yes it works wonderfully and the rows display.

    however upon submit it stores that value in the database. the event to display the rows is an onchange event. and when a user returns to that page it already has the yes value therefore the onchange event never happens (because the user has no need to select yes again) and the hidden rows never display.

    What i would like is for it to run the function on load and display any rows where the value is already yes.

    if i just misunderstood your answer then I apologize

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Try this - after an onchange event has occured, set the selectedIndex of the select list back to 0 in your function togglerows(). That will force the user to select an option again.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Change window.onload=toggleRows();

    to window.onload=toggleRows;

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Phillip, That is not optimal for us because we don't want to force a user to choose something each time they log in. rather just display the results for what they have chosen previously.

    Logic,
    I have tried that with no luck.

    could it be because each hidden rowset is different on the page ie.

    Code:
    <tr class="ocusdheart"> 
    			<td class="bold">HEART CONDITION:</td><td id="HRI_Heart_Condition">~([01]HRI_Heart_Condition)</td><td class="gwCen"></td>
    			<td><select name="eReg|HRI_Heart_Condition" id="eReg|HRI_Heart_Condition" onchange="JavaScript: toggleRows(this, ['heart1', 'heart2', 'heart3', 'heart4']);">
    					<option value="">Select...</option><option value="Y">Yes</option><option value="N">No</option>	
    </tr>
    Code:
    </tr>
    <tr class="ocusdseizures"> 
    			<td class="bold">SEIZURES:</td><td id="HRI_Seizures">~([01]HRI_Seizures)</td><td class="gwCen"></td>
    			<td><select name="eReg|HRI_Seizures" id="eReg|HRI_Seizures" onchange="JavaScript: toggleRows(this, ['seizure1', 'seizure2', 'seizure3', 'seizure4', 'seizure5', 'seizure6', 'seizure7', 'seizure8', 'seizure9']);">
    					<option value="">Select...</option><option value="Y">Yes</option><option value="N">No</option>
    </tr>
    both call the same script onchange but they have different values associated with the script

    I could be completely wrong here but wouldn't running togglerows onload not work as is because of the specifications in each line item as to what rows to unhide?

    How does running the javascript by itself know 1) what rows to unhide and 2) whether or not the selected value of each particular select == Y..

    Would I have to run each specific onchange event onload somehow?

  • #7
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by sgadow View Post
    Logic,
    I have tried that with no luck.
    OK but keep it anyway, it's correct.

    Quote Originally Posted by sgadow View Post

    Would I have to run each specific onchange event onload somehow?
    It looks as though you will.

    Statements to run in your onload handler:

    Code:
    var selects = document.getElementsByTagName( 'select' );
    
    for( var i = 0, box; ( box = selects[ i ] ); i++ )
      if( box.name.indexOf( 'ereg|' ) == 0 ) // or however you want to identify the <selects> involved
        box.onchange();
    NOTE There is no need for javascript: in your event handlers, and it should be removed.
    Last edited by Logic Ali; 02-13-2013 at 08:17 PM.

  • Users who have thanked Logic Ali for this post:

    sgadow (02-14-2013)

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    There is no need to use onload for this - just move the script to just before the </body> tag where most JavaScript belongs.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Code:
    var selects = document.getElementsByTagName( 'select' );
    
    for( var i = 0, box; ( box = selects[ i ] ); i++ )
      if( box.name.indexOf( 'ereg|' ) == 0 )
        box.onchange();
    That makes sense but I am unsure as to where exactly or how to modify my code to get it to work. I am rather new to this sorry

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by sgadow View Post
    Code:
    var selects = document.getElementsByTagName( 'select' );
    
    for( var i = 0, box; ( box = selects[ i ] ); i++ )
      if( box.name.indexOf( 'ereg|' ) == 0 )
        box.onchange();
    That makes sense but I am unsure as to where exactly or how to modify my code to get it to work. I am rather new to this sorry
    The bottom of the page should look like this:

    Code:
    <script type="text/javascript">
    var selects = document.getElementsByTagName( 'select' );
    
    for( var i = 0, box; ( box = selects[ i ] ); i++ )
      if( box.name.indexOf( 'ereg|' ) == 0 )
        box.onchange();
    </script>
    </body>
    </html>
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    sgadow (02-14-2013)

  • #11
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    The bottom of the page should look like this:

    Code:
    <script type="text/javascript">
    var selects = document.getElementsByTagName( 'select' );
    
    for( var i = 0, box; ( box = selects[ i ] ); i++ )
      if( box.name.indexOf( 'ereg|' ) == 0 )
        box.onchange();
    </script>
    </body>
    </html>


    That works wonderfully.. how would i add additional box.names accommodate to more than one select on the same page??

    if( box.name.indexOf( 'eReg|HRI_Diabetes' ) == 0 )
    if( box.name.indexOf( 'eReg|HRI_Asthma' ) == 0 )
    if( box.name.indexOf( 'eReg|HRI_Allergies' ) == 0 )

    etc etc..

    Or could i do something like

    if( box.name.indexOf( 'eReg|HRI_*' ) == 0 ) as a wildcard? all select boxes start with eReg|HRI_
    Last edited by sgadow; 02-14-2013 at 05:12 PM.

  • #12
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by sgadow View Post

    if( box.name.indexOf( 'eReg|HRI_*' ) == 0 ) as a wildcard? all select boxes start with eReg|HRI_
    Then just remove the asterisk and that's it.

  • #13
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Logic Ali View Post
    Then just remove the asterisk and that's it.
    Awesome.. One more question do you see any reason why this would be happening? it works fine for all drop downs with the exception of seizures and heart condition which are the last two on the page.

    These are the TR's that contain each of the dropdowns.

    Code:
    <tr class="ocusddiabetes">
    			<td class="bold">DIABETES:</td><td id="HRI_Diabetes">~([01]HRI_Diabetes)</td><td class="gwCen"></td>
    			<td><select name="eReg|HRI_Diabetes" id="eReg|HRI_Diabetes" onchange="toggleRows(this, ['diabetes1', 'diabetes2']);">
    					<option value="">Select...</option><option value="Y">Yes</option><option value="N">No</option>
    </tr>
    
    <tr class="ocusdasthma"> 
    			<td class="bold">ASTHMA:</td><td id="HRI_Asthma">~([01]HRI_Asthma)</td><td class="gwCen"></td>
    			<td><select name="eReg|HRI_Asthma" id="eReg|HRI_Asthma" onchange="toggleRows(this, ['asthma1', 'asthma2', 'asthma3', 'asthma4']);">
    					<option value="">Select...</option><option value="Y">Yes</option><option value="N">No</option>
    </tr>
    
    <tr class="ocusdallergy"> 
    			<td class="bold">ALLERGIES:</td><td id="HRI_Allergies">~([01]HRI_Allergies)</td><td class="gwCen"></td>
    			<td><select name="eReg|HRI_Allergies" id="eReg|HRI_Allergies" onchange="toggleRows(this, ['allergy1', 'allergy2', 'allergy3', 'allergy4']);">
    					<option value="">Select...</option><option value="Y">Yes</option><option value="N">No</option>
    </tr>
    
    <tr class="ocusdseizures"> 
    			<td class="bold">SEIZURES:</td><td id="HRI_Seizures">~([01]HRI_Seizures)</td><td class="gwCen"></td>
    			<td><select name="eReg|HRI_Seizures" id="eReg|HRI_Seizures" onchange="toggleRows(this, ['seizure1', 'seizure2', 'seizure3', 'seizure4', 'seizure5', 'seizure6', 'seizure7', 'seizure8', 'seizure9']);">
    					<option value="">Select...</option><option value="Y">Yes</option><option value="N">No</option>
    </tr>
    
    <tr class="ocusdheart"> 
    			<td class="bold">HEART CONDITION:</td><td id="HRI_Heart_Condition">~([01]HRI_Heart_Condition)</td><td class="gwCen"></td>
    			<td><select name="eReg|HRI_Heart_Condition" id="eReg|HRI_Heart_Condition" onchange="toggleRows(this, ['heart1', 'heart2', 'heart3', 'heart4']);">
    					<option value="">Select...</option><option value="Y">Yes</option><option value="N">No</option>	
    </tr>

  • #14
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Never mind I figured it out.. I have some selects without on change events and it was ending the script.

  • #15
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by sgadow View Post
    Never mind I figured it out.. I have some selects without on change events and it was ending the script.
    Fine, but I notice that none of your <select>s have closing tags.


  •  

    Posting Permissions

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