show tr's based on dropdown selection

Question

rpgowned 0 Newbie Poster

12 Years Ago

I know there are many other threads on this but i can't seem to make heads or tails of them and make them work in my code. I have multiple dropdowns on a page with a yes/no answer each question has sub questions if yes is chosen.. I would like to have the sub questions only display if yes is chosen from the primary question. that way i can clean up the page and get red of the if yes then this verbage.

Any help would be appreciated on the best way to do this :)

<!DOCTYPE html>
    <html>
    <head>
    ~[wc:gwParentReg]
    ~[wc:guardian_header]   

    ~[if#stuCheck.isstudent]
        <p>Your account does not allow access to this page.</p>
    [else#stuCheck]

        <div style="margin: 20px; 10px; 10px; 0px;">
            <div style="float:right" id="progDiv"></div>
            <div style="font-weight:bold; font-size:large; padding-right:10px">E-Registration - Health Record Information: &nbsp; ~([01]lastfirst)</div>
            <span class="gwExample">Please provide the health information requested below. If you have specific issues or concerns about your child's health, contact the school nurse.</span>
        </div>       

        <form name="eReg" id="eReg">
        <div align="center">
            <img src="/images/gwReg/gwDelete.gif" alt="Remove Value" title="Remove Value" border="0px" class="gwDelete" />
            Click on this image to indicate that the data on file at the school needs to be removed.
        </div>
        <table border="0" cellspacing="0" cellpadding="4">
            <tr><td class="bold">&nbsp;</td><td width="200" style="font-weight:bold; font-size:larger">On file with the school</td>
                <td></td><td style="font-weight:bold; font-size:larger">Please make your updates or changes.</td>
            </tr>

        <tr class="headerRow"> 
        <td class="bold" colspan="4" align="center">Health Concerns</td>
    </tr>
     <tr>
    </tr>
    <tr class="~[evenoddrow]"> 
                <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">
                        <option></option><option value="Y">Yes</option><option value="N">No</option>
    </tr>
    <tr class="~[evenoddrow]"> 
                <td class="bold" align="center">If yes list medicine to be given at school:</td><td id="HRI_Diabetes_Meds">~([01]HRI_Diabetes_Meds)</td><td class="gwCen"></td>
                <td><input type="text" name="eReg|HRI_Diabetes_Meds" id="eReg|HRI_Diabetes_Meds" value="" size="30" /><span class="gwExample">medicine1, medicine2,</span></td>
    </tr>
    <tr class="~[evenoddrow]"> 
                <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">
                        <option></option><option value="Y">Yes</option><option value="N">No</option>
    </tr>
    <tr class="~[evenoddrow]"> 
                <td class="bold" align="center">If yes list medicine to be given at school:</td><td id="HRI_Asthma_Meds">~([01]HRI_Asthma_Meds)</td><td class="gwCen"></td>
                <td><input type="text" name="eReg|HRI_Asthma_Meds" id="eReg|HRI_Asthma_Meds" value="" size="30" /><span class="gwExample">medicine1, medicine2,</span></td>
    </tr>
    <tr class="~[evenoddrow]"> 
                <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">
                        <option></option><option value="Y">Yes</option><option value="N">No</option>
    </tr>
    <tr class="~[evenoddrow]"> 
                <td class="bold" align="center">If yes list medicine to be given at school:</td><td id="HRI_Allergy_Meds">~([01]HRI_Allergy_Meds)</td><td class="gwCen"></td>
                <td><input type="text" name="eReg|HRI_Allergy_Meds" id="eReg|HRI_Allergy_Meds" value="" size="30" /><span class="gwExample">medicine1, medicine2,</span></td>
    </tr>
    <tr class="~[evenoddrow]"> 
                <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">
                        <option></option><option value="Y">Yes</option><option value="N">No</option>
    </tr>
    <tr class="~[evenoddrow]"> 
                <td class="bold" align="center">If yes list medicine to be given at school:</td><td id="HRI_Seizure_Meds">~([01]HRI_Seizure_Meds)</td><td class="gwCen"></td>
                <td><input type="text" name="eReg|HRI_Seizure_Meds" id="eReg|HRI_Seizure_Meds" value="" size="30" /><span class="gwExample">medicine1, medicine2,</span></td>
    </tr>
    <tr class="~[evenoddrow]"> 
                <td class="bold" align="center">Type of seizure:</td><td id="HRI_Seizure_Type">~([01]HRI_Seizure_Type)</td><td class="gwCen"></td>
                <td><input type="text" name="eReg|HRI_Seizure_Type" id="eReg|HRI_Seizure_Type" value="" size="30" /></td>
    </tr>
    <tr class="~[evenoddrow]"> 
                <td class="bold" align="center">Date of last seizure:</td><td id="HRI_Seizure_LastDate">~([01]HRI_Seizure_LastDate)</td><td class="gwCen"></td>
                <td><input type="text" name="eReg|HRI_Seizure_LastDate" id="eReg|HRI_Seizure_LastDate" value="" size="30" /></td>
    </tr>
    <tr class="~[evenoddrow]"> 
                <td class="bold" align="center">Average duration of seizure:</td><td id="HRI_Seizure_Average_Duration">~([01]HRI_Seizure_Average_Duration)</td><td class="gwCen"></td>
                <td><input type="text" name="eReg|HRI_Seizure_Average_Duration" id="eReg|HRI_Seizure_Average_Duration" value="" size="30" /></td>
    </tr>
    <tr class="~[evenoddrow]"> 
                <td class="bold" align="center">Action to be taken at school in event of seizure:</td><td id="HRI_Seizure_Action">~([01]HRI_Seizure_Action)</td><td class="gwCen"></td>
                <td><input type="text" name="eReg|HRI_Seizure_Action" id="eReg|HRI_Seizure_Action" value="" size="30" /></td>
    </tr>
    <tr class="~[evenoddrow]"> 
                <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">
                        <option></option><option value="Y">Yes</option><option value="N">No</option>  
    </tr>
    <tr class="~[evenoddrow]"> 
                <td class="bold" align="center">If yes list medicine to be given at school:</td><td id="HRI_Heart_Condition_Meds">~([01]HRI_Heart_Condition_Meds)</td><td class="gwCen"></td>
                <td><input type="text" name="eReg|HRI_Heart_Condition_Meds" id="eReg|HRI_Heart_Condition_Meds" value="" size="30" /><span class="gwExample">medicine1, medicine2,</span></td>
    </tr>
    </table>
        </form>

        <table>
            <tr><td colspan="2" align="right" style="font-weight:bold">Please click the Save button to save your progress and continue to the next screen.</td> 
                <td class="bold" align="right" style="width:150px; text-align:right">
                    <form action="gwPerms.html?sa=N" method="POST" id="frm2"  >
                        <input type="hidden" name="ac" value="autosendupdate" />
                        <input type="hidden" name="[01]eRegIP" id="eRegIP"  value="" />          
                        <input type="hidden" name="[01]eRegEmergency" id="eRegEmergency"  value="" />
                        <input type="button" name="gwSubmit" value="Save" id="gwSubmitBtn" onClick="gwDoChecks('eRegEmergency','~[ip address]')" />  
                        <img src="/images/gwReg/gwProcessing.gif" alt="Processing" title="Processing" style="display:none" id="gwProcessPict" />
                    </form>          
                </td>
            </tr>
        </table>

        <input id="activeNav" type="hidden" value="#btn-gwEReg"/>
        <script language="javascript">
            if(!gwParEngineFile || !gwParRegFile)
                alert("E-Registration is not available at this time.  Please try again later.  If this problem continues, please contact your child's school.");
            else
            {   
                loadData('eRegEmergency');
                gwShowProgress(document.location.href);
            }
            document.body.style.cursor = '';
        </script>    
    [/if#stuCheck.isstudent]

    ~[wc:guardian_footer]
    ~[wc:gwLogo]
    </body>
    </html>

javascript

2 Contributors
11 Replies
179 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by AleMonteiro

AleMonteiro 238 Can I pick my title?

12 Years Ago

You have to add an onChange event to the "masters" selects, and when they change you update the require rows.

AleMonteiro 238 Can I pick my title?

12 Years Ago

What is showresults(eReg|HRI_Asthma) suppose to mean?

AleMonteiro 238 Can I pick my title?

12 Years Ago

The best alternative is to create a function to hide/show rows, something like this:

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;
    }

};

And you should use as:

<select onchange="JavaScript: toggleRows(this, ['testing1', 'testing2', 'testing3']);">

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

rpgowned 0 Newbie Poster · Answer 1 · 2012-12-19T19:29:42+00:00

So i tried that and it didn't work. Although I am sure I did something wrong as I am not too good at this

<tr class="~[evenoddrow]"> 
            <td class="bold">ASTHMA:</td><td id="HRI_Asthma">~([01]HRI_Asthma)</td><td class="gwCen"></td>
            <td><select name="eReg|HRI_Asthma" onchange="if (this.selectedIndex=='1'){this.form['asthmameds'].style.visibility='visible'}else {this.form['eReg|HRI_Asthma_Meds'].style.visibility='hidden'};">
            <option value="" selected="selected"></option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
</tr>
<tr class="~[evenoddrow]" name="asthmameds"> 
            <td class="bold"><span style="padding: 0 80px">If yes list medication to be given at school:</span></td><td id="HRI_Asthma_Meds">~([01]HRI_Asthma_Meds)</td><td class="gwCen"></td>
            <td><input type="text" name="eReg|HRI_Asthma_Meds" id="eReg|HRI_Asthma_Meds" value="" size="30" /><span class="gwExample">medication1, medication2,</span></td>
</tr>

Doing it this way don't work it won't hide anything

Below works if i want to hide only the text box

<tr class="~[evenoddrow]"> 
            <td class="bold">ASTHMA:</td><td id="HRI_Asthma">~([01]HRI_Asthma)</td><td class="gwCen"></td>
            <td><select name="eReg|HRI_Asthma" onchange="if (this.selectedIndex=='1'){this.form['eReg|HRI_Asthma_Meds'].style.visibility='visible'}else {this.form['eReg|HRI_Asthma_Meds'].style.visibility='hidden'};">
            <option value="" selected="selected"></option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
</tr>
<tr class="~[evenoddrow]" name="asthmameds"> 
            <td class="bold"><span style="padding: 0 80px">If yes list medication to be given at school:</span></td><td id="HRI_Asthma_Meds">~([01]HRI_Asthma_Meds)</td><td class="gwCen"></td>
            <td><input type="text" name="eReg|HRI_Asthma_Meds" id="eReg|HRI_Asthma_Meds" value="" size="30" /><span class="gwExample">medication1, medication2,</span></td>
</tr>

My goal here is to hide the complete row not just the data within the row. I can't seem to figure it out

rpgowned 0 Newbie Poster · Answer 2 · 2012-12-19T20:16:34+00:00

I was thinking i could do something like the following..

<script type="text/javascript" language="javascript">        
    function showresults(SiteValue) {
if (eReg|HRI_Asthma == 'Yes') {
document.getElementById('asthmameds').style.display='';
}
else {
document.getElementById('asthmameds').style.display='none';
}
}



<tr class="~[evenoddrow]"> 
            <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">
                    <option></option><option value="Y">Yes</option><option value="N">No</option>
</tr>
<tr class="~[evenoddrow]" id="asthmameds"> 
            <td class="bold"><span style="padding: 0 80px">If yes list medication to be given at school:</span></td><td id="HRI_Asthma_Meds">~([01]HRI_Asthma_Meds)</td><td class="gwCen"></td>
            <td><input type="text" name="eReg|HRI_Asthma_Meds" id="eReg|HRI_Asthma_Meds" value="" size="30" /><span class="gwExample">medication1, medication2,</span></td>
</tr>

But That don't seem to work either :(

rpgowned 0 Newbie Poster · Answer 3 · 2012-12-19T20:56:25+00:00

I made some mistakes above so I tried to fix them here.. but it is still not working.

  <script type="text/javascript" language="javascript">      
    function showresults(eReg|HRI_Asthma) {
if (eReg|HRI_Asthma == "Yes") {
document.getElementById('asthmameds').style.display='';
}
else {
document.getElementById('asthmameds').style.display='none';
}
}
</script>
<tr class="~[evenoddrow]"> 
            <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="showresults(this.value)">
                    <option value=""></option><option value="Yes">Yes</option><option value="No">No</option>
</tr>
<tr class="~[evenoddrow]" id='asthmameds'> 
            <td class="bold"><span style="padding: 0 80px">If yes list medication to be given at school:</span></td><td id="HRI_Asthma_Meds">~([01]HRI_Asthma_Meds)</td><td class="gwCen"></td>
            <td><input type="text" name="eReg|HRI_Asthma_Meds" id="eReg|HRI_Asthma_Meds" value="" size="30" /><span class="gwExample">medication1, medication2,</span></td>
</tr>

rpgowned 0 Newbie Poster · Answer 4 · 2012-12-19T21:59:29+00:00

To be completely honest I don't really know what I am doing lol.. basically I am playing with scripts i have found trying to get something to work..

The thing i don't understand is i can use something like

<tr class="~[evenoddrow]">
    <td class="bold">ASTHMA:</td><td id="HRI_Asthma">~([01]HRI_Asthma)</td><td class="gwCen"></td>
    <td><select name="eReg|HRI_Asthma" onchange="if (this.selectedIndex=='1'){this.form['eReg|HRI_Asthma_Meds'].style.display=''}else {this.form['eReg|HRI_Asthma_Medss'].style.display='none'};">
    <option value="" selected="selected"></option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
    </tr>
    <tr class="~[evenoddrow]" id="testing">
    <td class="bold"><span style="padding: 0 80px">If yes list medication to be given at school:</span></td><td id="HRI_Asthma_Meds">~([01]HRI_Asthma_Meds)</td><td class="gwCen"></td>
    <td><input type="text" name="eReg|HRI_Asthma_Meds" id="eReg|HRI_Asthma_Meds" value="" size="30" /><span class="gwExample">medication1, medication2,</span></td>
    </tr>just yes/no

and it hides the text box just fine

but if i change

{this.form['eReg|HRI_Asthma_Meds'].style.display=''}else {this.form['eReg|HRI_Asthma_Meds'].style.display='none'};">

to

    {this.form['testing'].style.display=''}else {this.form['testing'].style.display='none'};">

in order to have it hide the whole table row it does nothing

AleMonteiro 238 Can I pick my title? · Answer 5 · 2012-12-20T14:50:40+00:00

Try this:

{document.getElementById('testing').style.display=''}else {document.getElementById('testing').style.display='none'};

The difference is like this: this.form['element_name'] and document.getElementById('element_id')

I have a curiosity question for you, what server-side language are you using?

rpgowned 0 Newbie Poster · Answer 6 · 2012-12-20T16:30:40+00:00

this is for PowerSchool student information system which is java based at its core there is also a custom PowerSchool language in conjunction.

and that worked wonderfully :) thank you so much

one more question if i had another TR say testing2 how would i add that to

    {document.getElementById('testing').style.display=''}else {document.getElementById('testing').style.display='none'};

in order to hide both rows some of the options have 5-6 rows associated with them

rpgowned 0 Newbie Poster · Answer 7 · 2012-12-20T18:16:36+00:00

That is exactly what I needed thank you so much appreciate all your help

AleMonteiro 238 Can I pick my title? · Answer 8 · 2012-12-20T19:25:40+00:00

AleMonteiro 238 Can I pick my title?

12 Years Ago

You're wellcome, just mark as solved please.