CodingForums.com - window.onload question

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - window.onload question (http://www.codingforums.com/showthread.php?t=287590)

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?

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.

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

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.

Change window.onload=toggleRows();

to window.onload=toggleRows;

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?

Quote:

Originally Posted by sgadow (Post 1313154)

Logic,
I have tried that with no luck.

OK but keep it anyway, it's correct.

Quote:

Originally Posted by sgadow (Post 1313154)

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.

There is no need to use onload for this - just move the script to just before the </body> tag where most JavaScript belongs.

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 :(

Quote:

Originally Posted by sgadow (Post 1313195)

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>

Quote:

Originally Posted by felgall (Post 1313268)

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_

Quote:

Originally Posted by sgadow (Post 1313366)

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.

Quote:

Originally Posted by Logic Ali (Post 1313394)

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>

Never mind I figured it out.. I have some selects without on change events and it was ending the script.

Quote:

Originally Posted by sgadow (Post 1313621)

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.