Expected the primary menu (Report Type) to be visible only. Before and After selection from Primary Menu; Other filters are not visible
Expected to only show the dates if any report selected other than R30: After selection of any R report, except R30 will make start-date and end-date visible
Expected to only show mineSite & CertificateType after selection of R30: After selection of R30 report, only mineSite (required) & certificateType is visible
Here is what I have been using (Javascript function)
function showDates(sel)
{
if(sel.value == 'R30')
{
document.getElementById('dates').style.display = 'none';
document.getElementById('m1warning').style.display = 'none';
document.getElementById('mines').style.display = '';
document.getElementById('certificate').style.display = '';
}
else if (sel.value == 'M01')
{
document.getElementById('dates').style.display = 'none';
document.getElementById('m1warning').style.display = 'inline';
document.getElementById('mines').style.display = 'none';
document.getElementById('certificate').style.display = 'none';
}
else if(sel.value == 'R01' || sel.value == 'R10' || sel.value == 'R20' || sel.value == '')
{
document.getElementById('mines').style.display = 'none';
document.getElementById('dates').style.display = '';
document.getElementById('certificate').style.display = 'none';
document.getElementById('m1warning').style.display = 'none';
}
else if(sel.value == '')
{
document.getElementById('mines').style.display = 'none';
document.getElementById('dates').style.display = 'none';
document.getElementById('certificate').style.display = 'none';
document.getElementById('m1warning').style.display = 'none';
}
}
function showOptions(sel)
{
if(sel.value == 'R30')
{
document.getElementById('dates').style.display = 'none';
document.getElementById('m1warning').style.display = 'none';
document.getElementById('mines').style.display = '';
document.getElementById('certificate').style.display = '';
}
else if (sel.value == 'M01')
{
document.getElementById('dates').style.display = 'none';
document.getElementById('m1warning').style.display = 'inline';
document.getElementById('mines').style.display = 'none';
document.getElementById('certificate').style.display = 'none';
}
else if(sel.value == 'R01' || sel.value == 'R10' || sel.value == 'R20' || sel.value == '')
{
document.getElementById('mines').style.display = 'none';
document.getElementById('dates').style.display = '';
document.getElementById('certificate').style.display = 'none';
document.getElementById('m1warning').style.display = 'none';
}
else if(sel.value == '')
{
document.getElementById('mines').style.display = 'none';
document.getElementById('dates').style.display = 'none';
document.getElementById('certificate').style.display = 'none';
document.getElementById('m1warning').style.display = 'none';
}
}<div class="dates" id="dates">
<xsl:text>Start Date:</xsl:text>
<input id="startDate" name="startdate" type="date" size="15" placeholder="yyyy-mm-dd" style="width:150px"/>
<xsl:text> End Date:</xsl:text>
<input id="endDate" name="enddate" type="date" size="15" placeholder="yyyy-mm-dd" style="width:150px"/>
</div>
<table>
<tr>
<td>
<div class="mines" id="mines">
<form id="mine_site" name = "form2">
<span class="site_label">Mine Site: </span>
<select name="minesite" id="minesite" onchange="showOptions(this)" style="width:150px">
<option value=""/>
<xsl:variable name="mine_sites" select="$codes/code[@name eq 'employer']"/>
<xsl:for-each select="$mine_sites/item">
<xsl:element name="option">
<xsl:attribute name="value" select="@key"/>
<xsl:apply-templates/>
</xsl:element>
</xsl:for-each>
</select>
</form>
</div>
</td>
<td>
<div class="certificate" id="certificate">
<span class="certificate_label">Certificate Type: </span>
<select name="typeOfcertificate" id="typeOfcertificate" onchange="showOptions(this)" style="width:150px">
<option value=""/>
<xsl:variable name="certificate_types" select="$codes/code[@name eq 'certiType']" />
<xsl:for-each select="$certificate_types/item">
<xsl:sort select="@order"/>
<xsl:element name="option">
<xsl:attribute name="value" select="@key"/>
<xsl:apply-templates/>
</xsl:element>
</xsl:for-each>
</select>
</div>
</td>
</tr>
</table>
<br/>
<input type="submit" class="buttonToLink" value="Submit" onclick="beginCheckMReport()"/>
</form>Badly stuck on how can I make the secondary filters dependent on the Primary Menu selection. And after the submission of report, making the form empty
Sorry for bothering everyone with this silly issue